知优码

您现在的位置是:首页 > WEB相关 > Javascript脚本

Javascript脚本

js新建的元素上绑定事件

2021-06-04Javascript脚本
js新建的元素上绑定事件

从 jQuery 1.7 开始,您应该jQuery.fn.on在填充了选择器参数的情况下使用

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

解释:

这称为事件委托,其工作原理如下。该事件附加到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您会将事件绑定到已经存在的父级(这是这里问题的核心,您需要绑定到存在的东西,不要绑定到动态内容),这可以(也是最简单的选项)是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>