在Jquery中正确使用.on方法

Question

我真的很喜欢.live方法,因为它很简单,基本上与标准事件处理程序没什么不同.

唉,它被弃用了,我留下了.on方法.

基本上,我正在加载并动态加载内容,我需要触发相同的事件处理程序.而不是两次或多次添加事件处理程序..live对此很好,但是.on已经取代了它,我似乎无法让它工作.

检查此代码:

jQuery('#who_me').live('click', function(){
        alert('test123');
        return false;
    });

应该是这样的:

jQuery('#who_me').on('click', function(){
        alert('test123');
        return false;
    });

但是当我在ajax调用之后用.html方法替换内容时,只有live方法有效.

任何人都可以为我清除这个吗？

Answer 1

你没有.on()正确使用.如果#who_me对象来去,这是一个更好的实现.

jQuery(document.body).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

您在jQuery对象中使用的选择器.on()必须是安装事件处理程序时存在的对象,并且永远不会被删除或重新创建,并且是您希望安装事件的对象或该对象的父对象.作为第二个参数传递的选择器.on()是一个可选的选择器,它匹配您希望事件所在的对象.如果需要.live()类型行为,则必须在jQuery对象中传递一个静态父对象,并在第二个参数中传递与您希望事件所在的实际对象相匹配的选择器.

理想情况下,您将父对象放在相对接近动态对象的jQuery对象中.我之所以展示document.body只是因为我知道它可以工作而且不知道HTML的其余部分,但你宁愿把它放在你的实际对象附近.如果在document对象上放置了太多动态事件处理程序document.body,那么事件处理确实会变慢,特别是如果您有频繁事件(如click或mousemove)的复杂选择器或处理程序.

作为参考,100%相当于您的.live()代码是这样的:

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

.live()只需在文档对象上安装其所有事件处理程序,并使用事件冒泡来查看页面中其他对象上发生的所有事件.jQuery已弃用,.live()因为最好不要在文档对象上安装所有实时事件处理程序(出于性能原因).因此,选择一个更接近对象的静态父对象.