This question's answers are a community effort。编辑现有答案以改善此职位。它目前不接受新的答案或互动。
                            
                        
                    
                
                            
                    
我有一些代码,在其中循环浏览页面上的所有选择框,并将一个.hover事件绑定到它们上,以使其在mouse on/off上的宽度发生一些变化。

这在页面准备就绪时发生,并且工作正常。

我的问题是,在初始循环之后,我通过Ajax或DOM添加的所有选择框都没有事件绑定。

我已经找到了这个插件(jQuery Live Query Plugin),但是在我使用插件向页面添加另一个5k之前,我想看看是否有人知道直接使用jQuery或通过其他方法执行此操作的方法。

最佳答案

从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 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'
});


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

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


适用于

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

07-24 09:37
查看更多