不处理动态内容的事件处理程序[duplicate]

This question already has an answer here:

这个问题已经有了答案:

Event binding on dynamically created elements? 23 answers
动态创建的元素上的事件绑定?23日答案

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.

我有一个标签a，当点击时，它会附加另一个标签B，在点击时执行动作B。当我点击标签B时，执行动作B。然而，.on方法似乎并不适用于动态创建的标记B。

My html and jquery for tag A is as below:

我的标签A的html和jquery如下:

<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:

当单击标记B时，将执行一些操作B。我的jquery如下:

$('.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.

我有一些非动态的内容有类。更新”。在上面的.on()方法中，对于非动态内容是可以的，但是对于动态内容就不行。

How can I make it work for dynamic content?

如何使它适用于动态内容?

2 个解决方案

#1

498

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

看到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.

jQuery集合接收事件，然后将其委托给匹配选择器作为参数的元素。这意味着与使用live时相反，在执行代码时，jQuery集合元素必须存在。

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.

1)尽可能将事件侦听器绑定到最精确的元素，以避免无用的事件处理。

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

也就是说，如果在id a的现有元素中添加b类的元素，那么不要使用

$(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.

2)小心，当你添加一个带有id的元素时，确保你没有添加两次。在HTML中，拥有两个具有相同id的元素不仅是“非法的”，而且还会破坏很多东西。例如，选择器“#c”将只检索具有此id的一个元素。

#2

You are missing the selector in the .on function:

您在.on函数中缺少选择器:

.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

如果新的HTML被注入到页面中，选择元素并在新的HTML被放置到页面之后附加事件处理程序。或者，使用委托事件来附加事件处理程序

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

参见jQuery 1.9 .live()不是更详细的函数。

#1

498