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

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

理想情况下，在jQuery对象中放置一个相对靠近动态对象的父对象。我展示document.body只是因为我知道它会起作用，而且不知道HTML的其余部分，但你宁愿把它放得更接近你的实际对象。如果在document对象或document.body上放置了太多的动态事件处理程序，那么事件处理速度可能会减慢，尤其是当您为频繁事件（如单击或鼠标移动）设置了复杂的选择器或处理程序时。

作为参考，100%等效于您的.live()代码如下：

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

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

Answer 2

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

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

Answer 3

使用on的方式基本上是bind的替代品，而不是live。与live和delegate一样，使用on可以使用事件委派，但必须提供特定的包含元素（delegate总是如此）。

在最简单的级别上，这可以是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 4

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

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

Answer 5

没有。

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

与相同

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

但是，您通常不希望绑定到document对象的太多处理程序。相反，您绑定到最近的静态祖先（在本例中为#who_me）。因此：

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

其中CCD_ 28是CCD_。

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/