jquery bind button click event fails

Question

test.html:

 <html> 
     <head>
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
        <script type="text/javascript" src="test.js"></script>
     </head>
     <body>
        <input id="but2" type="button" value="2"/>
     </body>
 </html>

jquery-1.4.2.js is downloaded from http://jquery.com/

test.js:

var fn=function(){
  alert('success!');
};

$('#but2').click(fn);

When clicked the button, nothing happened. I debugged for very long time but didn't find the root cause. Please help.

It is because at the moment the event handler should be attached, jQuery cannot find the element with ID but2 as the DOM is not loaded yet. Either move the script to the button of the page or, and this is the preferred solution, do as Patrick suggests. — Felix Kling
– Felix Kling, Commented Jul 31, 2010 at 16:59

user113716 · Accepted Answer · 2010-07-31 16:55:30Z

4

Wrap it such that the code doesn't run until the document has loaded.

Try it out: http://jsfiddle.net/ApDKU/

$(function() {
    var fn=function(){
      alert('success!');
    };

    $('#but2').click(fn);
});

Doing:

$(function() {...});

...is the same as

$(document).ready(function() {...});

...which cause the code inside to run only after the <body> tag has finished loading.

The way you had it, the code that attached the click handler to #but2 was running before #but2 had loaded onto the page.

answered Jul 31, 2010 at 16:55

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

peter Over a year ago

"patrick dw"'s method works!! Thank you so much!! By the way, there is a small problem with the code from jsfiddle.net/ApDKU. If some one copy the js code directly from jsfiddle.net/ApDKU, there are some invisible characters included and the code doesn't run. I noticed it in firebug. I deleted the invisible characters and the code run like a charm.

user113716 Over a year ago

@peter - Yeah, I don't know what those characters are. They're always there, and they really mess me up sometimes. Glad you got it working. :o)

Collectives™ on Stack Overflow

jquery bind button click event fails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related