Event handler not working on dynamic content [duplicate]

Question

I have a tag A in which when clicked on, it appends another tag B to perform an action B on click. So when I click on tag B, action B is performed. However, the .on method does not seems to be working on the dynamically created tag B.

My html and jquery for tag A is as below:

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium push-top">Update</a>');
})

When tag B is clicked, some action B is performed. My jquery is as below:

$('.update').on('click',function(){
  //action B
});

I have some non dynamic content which has class ".update" as well. In the .on() method above works fine for the non dynamic content, but not for the dynamic content.

How can I make it work for dynamic content?

Mccahill

You should use Event Delegate to bind event on dynamically added DOM element(s). api.jquery.com/delegate – Scotticism

Answer 1

You have to add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content).

See http://api.jquery.com/on/#direct-and-delegated-events

Change your code to

$(document.body).on('click', '.update' ,function(){

The jQuery set receives the event then delegates it to elements matching the selector given as argument. This means that contrary to when using live, the jQuery set elements must exist when you execute the code.

As this answers receives a lot of attention, here are two supplementary advises :

1) When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.

That is, if you're adding an element of class b to an existing element of id a, then don't use

$(document.body).on('click', '#a .b', function(){

but use

$('#a').on('click', '.b', function(){

2) Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c" would retrieve only one element with this id.

Caribbean

Or delegate for pre-1.7 :) – Irresolution

Note that delegate and on have parameters reversed: it's on('click', 'selector', function(){...}) but delegate('selector', 'click', function(){...}) – Janenejanenna

This doesn't work well on mobile/tablet devices. – Munger

@Munger can you provide an example of a case where jQuery works on a tablet and this specific use of on doesn't work ? – Simpatico

I came across this post on stackoverflow which helped me decided I had to use inline call to a Javascript function. #10165641 – Munger

Both the question and answer are awesome.. been racking my brains since yesterday! #smh .. i guess I just earned more programming chops.. – Toul

It would be better to narrow down the selector from body to preferably an id if possible for performance, that's one of the reason the live() function got deprecated – Stillbirth

@Stillbirth Please have a look at the question. Especially this part : $(document).append. – Simpatico

you are completely right I didn't properly examine the question, but it still might make sense to explain the proper use of .on, since many people refer to stackoverflow for this reason. And also add a comment not to add multiple id's – Stillbirth

@Stillbirth This is reasonable. I edited. – Simpatico

Thanks, it saved a lot of time, I didn't know about that and I was upgrading my code to newer versions of jQuery and was using .live so I thought it could be the same implementation! Cheers. – Gastrovascular

document alone is preferable to document.body as styling can cause body to not respond to bubbled mouse events. As you suggest, always target the nearest convenient non-changing ancestor to the dynamic element. – Emulsify

hi @DenysSéguret thank you! do i have to put the code in between: $(document).ready(function() { INSERT CODE HERE?? }} for it to work? – Crossexamine

Answer 2

You are missing the selector in the .on function:

.on(eventType, selector, function)

This selector is very important!

http://api.jquery.com/on/

If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler

See jQuery 1.9 .live() is not a function for more details.

Kauai