事件处理程序不处理动态内容[重复]-Java 学习之路

226

这个问题在这里已有答案：

Event binding on dynamically created elements? 23个答案

我有一个标签A，当点击它时，它附加另一个标签B来执行点击动作B.因此，当我点击标签B时，执行动作B.但是， .on 方法似乎不适用于动态创建的标记B.

标签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>');
})

当单击标签B时，执行一些动作B.我的jquery如下：

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

我有一些非动态内容，也有类".update" . 在上面的 .on() 方法中，非动态内容可以正常工作，但动态内容则不行 .

如何使其适用于动态内容？

2 回答

24
您缺少 .on 函数中的选择器：
```
.on(eventType, selector, function)
```
这个选择器非常重要！

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

如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序 . 或者，使用委派事件来附加事件处理程序

有关详细信息，请参阅jQuery 1.9 .live() is not a function .
回复于 2024-04-30T02:18:30+08:00
517
您必须添加选择器参数，否则直接绑定事件而不是委托，这仅在元素已存在时才有效（因此它不适用于动态加载的内容） .

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

将您的代码更改为
```
$(document.body).on('click', '.update' ,function(){
```
jQuery集接收事件，然后将其委托给与作为参数给出的选择器匹配的元素 . 这意味着与使用 live 时相反，执行代码时jQuery set元素必须存在 .

由于这个答案得到了很多关注，这里有两个补充建议：

1) 如果可能，尝试将事件侦听器绑定到最精确的元素，以避免无用的事件处理 .

也就是说，如果您要将类 b 的元素添加到id为 a 的现有元素，那么请不要使用
```
$(document.body).on('click', '#a .b', function(){
```
但是用
```
$('#a').on('click', '.b', function(){
```
2) 添加带有id的元素时要小心，以确保不添加两次 . HTML中的"illegal"不仅具有两个具有相同id的元素，而且还会破坏很多东西 . 例如，选择器 "#c" 将仅检索具有此id的一个元素 .
回复于 2024-04-30T02:18:30+08:00

事件处理程序不处理动态内容[重复]

2 回答

相关问题