javascript - 在 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() 因为最好不要在文档对象上安装所有实时事件处理程序(出于性能原因)。因此，选择一个更接近您的对象的静态父对象。