How do I debug why handler for "click" JavaScript event doesn't get called?

I've installed a handler for the click JavaScript event of a <button> element using the jQuery API, but the handler doesn't get called when the button is in fact clicked. How can I debug why the event handler is开发者_StackOverflown't invoked? I'm developing in Visual Studio 2010 and debugging with the help of Google Chrome Developer Tools.

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

EDIT

This is the HTML declaration of the button in question:

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

The 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 more information is needed.

EDIT 2

Somehow I got it working, not sure what was wrong in the first place, but at least now I know how to tell if an element was found or not!

You can only debug if the code is actually fired, which it seems to not be.

You could try to see if its even finding the selector using length. alert($("#myselector").length); or console.log($("#myselector").length);

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

(You said you where new to jQuery/Javascript, so hope it helped :D)

Inline JavaScript is executed as the page loads, so if the button is defined after the JavaScript the code won't find it and so can't attach the handler. You need to put that JavaScript in the document ready (or onload) function, which means it will be executed after the button (and everything else on the page) has loaded, and/or put it after the button in the source.

I'm guessing that the $('button').button(); throws an exception, and the rest of your code isn't executed. Comment out that line and see if it works.

Original reply:

1. Paste your code, or the relevant parts of it.
2. Add a debugger; statement to your handler function to see if you are entering it.
3. If not, then there is a problem with how you're registering the handler.
4. If you are entering it, maybe there is a problem with the handler itself.

your button may look like this

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

for this you bind a click handler like

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

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

but the drawback of this approach is it will get called for every button click, to prevent that you might want to add an id to your button and select that specific button e.g.

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

attach a click handler to it like

 $(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");
            });
});

have a look at jquery selectors