jquery click function is not working - javascript

The below code is working when i paste it in the browser directly (chrome console). But it is not working from my source file
<script type="text/javascript" >
$(".test").click(function(){
$(this).parent().find("div").toggle();
});
</script>

Try running it only after the DOM is ready:
$(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});

try replace $ by writing jQuery..
like,
jQuery(function(){

make sure you wrap in the document.ready function. it ensure that it will bind the function when the page load completes. Document.ready()
$(document).ready(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});

Always do this while using jquery
$('document').ready(function(){
$(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
});
Always put code in the function this will make it work with and with out document ready.

Related

JQuery live doesn't work

I try to get .live content into a div when there is a keyup... I looked at the forumtopic here but I didn't find the answer...
Why does my code not works? I use this JQuery:
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// When the document is ready set up our sortable with it's inherant function(s)
$(".atleetnaamlink").live('keyup', function(){
alert('test');
});
</script>
try on
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
$(document).ready(function() {
$("body").on('keyup' ,'.atleetnaamlink', function(){
alert('test');
});
});
DEMO
.live() is deprecated. Use .on() instead. That will work.
$(".atleetnaamlink").on('keyup', function(){
alert('test');
});
You are missing }); and Working demo http://jsfiddle.net/JwRRH/
Hope it helps :) by the way live is deprecated and if you keen check this out What's wrong with the jQuery live method?
code
$(document).ready(function() {
// When the document is ready set up our sortable with it's inherant function(s)
$(".atleetnaamlink").live('keyup', function(){
alert('test');
});
});​
or*
$(document).ready(function() {
// When the document is ready set up our sortable with it's inherant function(s)
$(document).live('keyup',".atleetnaamlink", function(){
alert('test');
});
});​
Add this above:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
and see if this works.
and important thing not to forget to accept it if it solves your issue.

JQuery click on link not working

Ive the following code:
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").click();
});
});
</script>
where btnSave is anchor element with ID btnSave, shortcut is from http://www.openjs.com/scripts/events/keyboard_shortcuts/ . If i change the line $("#btnSave").click(); to document.getElementById("btnSave").click() - all works fine. The question is why jquery implementation is not working in my case?
PS: made jsfiddle for my case: http://jsfiddle.net/0x49D1/WCmeU/
Here is the guy with similar problem: http://forums.asp.net/t/1591818.aspx
Instead of $("#btnSave").click(); try with $("#btnSave").trigger('click');
You can also use $("#btnSave")[0].click(); which is jquery equivalent to document.getElementById("btnSave").click();
Update:
It's not possible to simulate a user link click from javascript, for security reasons, all you can do is attach your own handler for click event and redirect based on the href of the link, like so:
$("#btnSave").bind('click', function() {
window.location.href = $(this).attr('href');
});
try this
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").live('click',function(){
// do stuff here
});
});
}); </script>

.click function .load not working

I am a total novice at jQuery, but giving it a go. I cant seem to get the .click function below to work. Can anyone tell me were I am going wrong?
$(".news").click(function() {
$("#contentarea").load("console/news.php");
});
You need to run the code in the ready event, so that the news element(s) are loaded:
$(document).ready(function(){
$(".news").click(function() {
$("#contentarea").load("console/news.php");
});
});
wrap the code inside the ready handler
$(function(){
//your code
});
or you can put the javascript code at the end of the markup like
//your html
<script>
//js code here
</script>

jQuery append not working from within a plugin

I want to run a an append(and more stuff later on) from within a plugin, but for some reason it doesn't do anything.
the code(basic):
(function($){
function _init(){
$('body').append('<div class="msg"/>');
}
_init()
})(jQuery);
jQuery append can only work after dom ready. The code you have pasted is probably working before dom ready event. Please check below;
http://api.jquery.com/ready/
To put it in code, it should look like:
(function($){
jQuery(document).ready(function(){
$('body').append('<div class="msg"/>');
});
})(jQuery);

listen for jQuery load event for a certain page

I am trying to add some functionality to my posts/new page when it loads, using jQuery. Is it possible to specifically listen to the jQuery page load event for any particular page?
Try this
if($("#elementId").length > 0){
$(document).ready(function(){
});
}
You can also use it is same as ready method.
$(function(){
});
Yes:
$(document).ready(function(){
// Your code here
});
OR simply:
$(function(){
// Your code here
});

Categories