javascript - 动态创建的元素上的事件绑定(bind)？

Question

<分区>

Answer 1

从 jQuery 1.7 开始您应该使用 jQuery.fn.on填充了选择器参数:

$(staticAncestors).on(eventName, dynamicChild, function() {});

解释:

这称为事件委托(delegate)，其工作方式如下。该事件附加到应处理的元素的静态父级 (staticAncestors)。每次在此元素或其中一个后代元素上触发事件时，都会触发此 jQuery 处理程序。然后处理程序检查触发事件的元素是否与您的选择器 (dynamicChild) 匹配。当有匹配项时，您的自定义处理程序函数就会被执行。

---

在此之前，推荐的方法是使用 live() :

$(selector).live( eventName, function(){} );

但是，live() 在 1.7 中被弃用，取而代之的是 on()，并在 1.9 中完全删除。 live() 签名:

$(selector).live( eventName, function(){} );

...可以用下面的on()代替签名:

$(document).on( eventName, selector, function(){} );

---

例如，如果您的页面正在动态创建具有类名 dosomething 的元素，您可以将事件绑定(bind)到已经存在的父元素(这是这里的问题，你需要一些存在的东西来绑定(bind)，不要绑定(bind)到动态内容)，这可以是(也是最简单的选择)是 document。虽然记住document may not be the most efficient option .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

绑定(bind)事件时存在的任何父级都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here
});

适用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>