Event handler not working on dynamic content [duplicate]

jquery dynamic-content static-content

This question already has answers here: Event binding on dynamically created elements? (23 answers) Closed 7 years ago.

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?

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

Denys Séguret

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.

Or delegate for pre-1.7 :)

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

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

I came across this post on stackoverflow which helped me decided I had to use inline call to a Javascript function. stackoverflow.com/questions/10165141/…

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

Community

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.

Event handler not working on dynamic content [duplicate]

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US