动态创建的元素上的事件绑定? [英] Event binding on dynamically created elements?

问题描述

我有一些代码，我循环浏览页面上的所有选择框并将 .hover 事件绑定到它们，以在 鼠标上对它们的宽度进行一些调整开/关.

这发生在页面准备好并且工作正常.

我遇到的问题是，我在初始循环后通过 Ajax 或 DOM 添加的任何选择框都不会绑定事件.

我找到了这个插件(jQuery Live Query Plugin)，但在我之前使用插件向我的页面再添加 5k，我想看看是否有人知道这样做的方法，直接使用 jQuery 或通过其他选项.

解决方案

从 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(){//当鼠标悬停和鼠标移开时你想发生什么//出现在匹配 '.dosomething' 的元素上});

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

$('.buttons').on('click', 'button', function(){//在这里做点什么});

适用于

<!-- 动态生成并添加到此处的 <button>s -->

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off.

This happens on page ready and works just fine.

The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.

I have found this plugin (jQuery Live Query Plugin), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.

解决方案

As of jQuery 1.7 you should use jQuery.fn.on with the selector parameter filled:

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

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

---

Prior to this, the recommended approach was to use live():

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

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

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

... can be replaced with the following on() signature:

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

---

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document. Though bear in mind 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'
});

Any parent that exists at the time the event is bound is fine. For example

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

would apply to

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

这篇关于动态创建的元素上的事件绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！