Question

I have bound this method to all elements of class .delete_filter.
First I get the ‘data’ attribute which contains the url which should be called by the method. Then I call a script which isn’t doing anything else then replacing all divs that are being reloaded with a typical “wait… loading data” div. It works fine but only once after its called one I can click on the other links as often as I want and nothing happens and this is driving me crazy and I’ve already gotten really angry!

$(".delete_filter").click(function() {
     url=$(this).attr('data');
     $.getScript("http://blabla.com/ajax/wait/filters:info", function() {
          $.getScript(url);
     });
});     

Where is the fail?

Answer 1

You change the DOM, The Div you are changing might contain the elements that you attached them the click event.

If that is the case you should use on\ live\ delegate functions.
Those functions will “work” the same for elements that currently rendered and elements that will be added dynamic later 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+

on version:

$("body").on("click", ".delete_filter", function(){
         url=$(this).attr('data');
         $.getScript("http://blabla.com/ajax/wait/filters:info", function() {
              $.getScript(url);
        });
    });