jQuery code doesn't work when normally run. But i does with breakpoints activated.

Question

Hi,

I have the following code in my application:

$(".deleteproduct").click(function() {
    id = this.id;
    alert("id: " + id);
});

If i run my site nothing happens when I click on an element with the class deleteproduct. But when I place breakpoints before line 1,2 and 3 it works like a charm.

The elements with class deleteproduct are loaded through AJAX call right behind $(document).ready(function(). The .click code is underneath it.

This seems really weird to me. It's working if breakpoints in Firebug are used, but not when there are not...

Answer 1

Sounds like a race condition to me. Have you remembered to put that code inside

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

That is so that the document has completely loaded before you try to script against the DOM.

Answer 2

If you are loading your .deleteproduct element via Ajax, you might need to define the click function using jQuery's live event handler.

$(".deleteproduct").live('click', function(){
    id = this.id;
    alert("id: "+id);
});

or put the function above in the Ajax callback.

Answer 3

$(document).ready(function(){
    $(".deleteproduct").click(function(){
        var id = $(this).attr('id');
        alert("id: "+id);
    });
});