Question

I am trying to register a event on elements like this:

$(document).ready(function() {
   $('.classname').change(function(){
       alert ('This line is never triggered');
   });
});

But the problem is that .classname elements are later loaded into the dom by ajax. So, how do I correctly register an event in this case? Is it possible to do it only once (I mean, not every time the new element appears?)

Answer 1

Further to the answers suggesting that you use live(), it’s also possible to use delegate(), for example:

$('form').delegate('.classname', 'change', function(){
    alert("This will alert when the newly-added element registers a 'change' event.");
});

For delegate the element to assign the selector (.classname') to, in this case the $('form') must exist in the DOM at the time of assignment.

---

Edited to note that the following section (following the next ‘edited’ until the ‘Reference’) is wrong:

JS Fiddle demo.

Calling stopPropagation() on an element between the element selected by the delegate() selector and the target to which the event is delegate()-d does somewhat predictably (though I hadn’t realised this before) prevent the delegation from occurring.

Edited in response to question, in comments, from OP:

Hey, just noticed, that if any parent’s event handler calls stopPropagation, then live event would stop! Is this correct?

Not according to the jQueryAPI (the entry is linked-to below):

…events handled by .delegate() will always propagate to the element to which they are delegated…

I’ve not tried/verified this as yet, but it seems that even if an element that sits between the target element ($('.classname')) and the delegate()-d element ($('form')) calls stopPropagation() it shouldn’t have an adverse effect on the delegate().

Reference:

• delegate().