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

您在.on()的jQuery对象中使用的选择器必须是安装事件处理程序时存在的对象，并且永远不会被删除或重新创建，并且是您希望事件安装在的对象或该对象的父级。作为第二个参数传递给.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()，因为最好不要在文档对象上安装所有实时事件处理程序（出于性能原因）。因此，选择一个离您的对象更近的静态父对象。

Answer 2

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

应相当于jQuery.live('#who_me', function() { // code here });

Answer 3

使用.live时的上下文为document，因此.on的选择器应为document

$(document).on("click","#who_me",function(){...});

Answer 4

您使用on的方式，它基本上是bind的替代品，而不是live。对于on，与live和delegate一样，您可以使用事件委派，但必须提供特定的包含元素（与delegate一样）。< / p>

在最简单的级别，这可以是document。在这种情况下，处理程序的功能与live完全相同：

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

然而，找到包含将存在的元素的最接近元素会更好。这样可以提高性能。

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

Answer 5

不。

$( '#who_me' ).live( 'click', function () { ... });

与：

相同

$( document ).on( 'click', '#who_me', function () { ... });

但是，您通常不希望绑定到document对象的多个处理程序。而是绑定到最近的静态祖先（在这种情况下为#who_me）。所以：

$( '#wrapper' ).on( 'click', '#who_me', function () { ... });

其中#wrapper是#who_me的祖先。

Answer 6

要替换.live（），你需要在.on（）调用中再增加一个参数。

// do not use! - .live(events, handler)
$('#container a').live('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

// new way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', 'a', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

来源：http://www.andismith.com/blog/2011/11/on-and-off/

在Jquery中正确使用.on方法

6 个答案: