在JavaScript中如何动态创建元素的事件绑定?


在JavaScript中如何动态创建元素的事件绑定?

从jQuery 1.7开始,你应该使用jQuery.fn.on:

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

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

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

但是,live()在1.7中赞成使用on(),并在1.9中完全删除。该live()签名:

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

...可以用以下on()签名替换:

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

例如,如果您的页面是动态创建具有类名的元素,dosomething您可以将事件绑定到已存在的父级(这是问题的核心,您需要存在要绑定的内容,不要绑定到动态内容),这可以是(也是最简单的选择)document。虽然记住document可能不是最有效的选择。

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

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

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

适用于

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