Question

我有一个标签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()方法适用于非动态内容，但不适用于动态内容。

如何让它适用于动态内容？

Answer 1

您必须添加选择器参数，否则直接绑定事件而不是委托，只有在元素已存在时才会起作用（因此它不适用于动态加载的内容）。

请参阅http://api.jquery.com/on/#direct-and-delegated-events

将您的代码更改为

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

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

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

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

也就是说，如果您要将一个类b的元素添加到标识为a的现有元素，那么请不要使用

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

但请使用

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

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

Answer 2

您缺少.on功能中的选择器：

.on(eventType, selector, function)

这个选择器非常重要！

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

如果要将新HTML注入页面，请选择元素和将新HTML放入页面后附加事件处理程序。要么， 使用委托事件附加事件处理程序

有关详细信息，请参阅jQuery 1.9 .live() is not a function。

事件处理程序不处理动态内容

2 个答案: