Geek Answers Handbook

How can I debug why the handler for the JavaScript click event is not called?

I set the handler for the JavaScript click event of the <button> element using the jQuery API , but the handler does not fire when the button is clicked. How can I debug why an event handler is not being called? I am developing Visual Studio 2010 and debugging using the Google Chrome Developer Tools.

I am new to JavaScript and don't know debugging methods :)

EDIT

This is the HTML declaration for this button:

 <button id="start-lint">Submit</button>

Relevant JavaScript:

 $('button').button(); var btn = $("button#start-lint"); log.debug("Button: %s", btn); btn.click(function () { log.debug("Button clicked"); });

Let me know if additional information is needed.

EDIT 2

Somehow I earned it, I'm not sure what was wrong in the first place, but at least now I know how to determine if an element was found or not!

+4
source share
4 answers

You can only debug if the code is really running, which it does not seem to be.

You can try to figure out whether it even uses a selector to use length. alerts ($ ("# myselector") length.); or console.log ($ ("# myselector") length.);

For javascript debugging, I recommend using FIREBUG for Firefox (http://getfirebug.com/) - you can set breakpoints, write to the console, etc., and it gives all possible displays of variables, objects, etc. The tutorial can be found here: http://www.youtube.com/watch?v=2xxfvuZFHsM

(You said you are new to jQuery / Javascript, so hope this helps: D)

+4
source

Built-in JavaScript is executed when the page loads, therefore, if the button is defined after JavaScript, the code will not find it and therefore will not be able to connect a handler. You have to put this JavaScript in the finished document (or onload), which means that it will be executed after the button (and everything else on the page) loads and / or places it after the button in the source.

+4
source

I assume $('button').button(); throws an exception and the rest of your code fails. Comment on this line and see if it works.

Original answer:

  • Paste your code or its corresponding parts.
  • Add a debugger; statement debugger; to your handler function to find out if you enter it.
  • If not, then there is a problem with how you register the handler.
  • If you enter it, the problem may be related to the handler itself.
+1
source

Your button might look like this:

 <input type="button" value="Click" />

for this you bind a click handler, for example

 $(document).ready(function(){ $("input[type='button']").click(function(e){ alert("somebody clicked a button"); }); });

http://jsfiddle.net/6gCRF/5/

but the disadvantage of this approach is that it will be called for every button click so that you don’t want to add an identifier to your button and select that particular button, for example.

 <input type="button" value="Click" id="specific" />

attach a click handler to it, for example

  $(document).ready(function(){ $("#specific").click(function(){ alert("specific button clicked"); }); });

http://jsfiddle.net/6gCRF/4/

EDIT

in your case, select the button by id

 $(document).ready(function(){ $("#start-lint").clcik(function(){ console.log("clicked"); }); });

you can also use the pseudo :button selector

 $(document).ready(function(){ $(":button").click(function(e){ console.log("clicked"); }); });

look at the jquery selector

+1
source

More articles:


All Articles