.live() 与 .on() 方法

Question

我正在开发一个项目，在该项目中，当我持续按下分/加按钮而不使用 .live() 方法将鼠标悬停在图片上时，该函数就会起作用。对于 .on() 方法，该函数不起作用。

如何解决此问题，使其也适用于 .on() 方法？

这是我所指内容的示例（我修复了此示例中的错误，但我使用 .on 方法是错误的）。

Answer 1

你没有正确使用它。 .live() 的替换是 $(document).on() ，当然，事件和处理程序被传入......例如：

$(document).on('click', '#myElement', function() { 
  //... some function ...
});

值得一提在 .on() 出现之前，.live() 已经被认为是处理此类绑定的低效方法。建议改用 .delegate()，现在改为 .on() （使用委托者语法）。

或者举个例子：您应该选择不会因 DOM 操作而被破坏的最近的祖先，而不是将文档作为侦听器（这是 .live() 过去所做的）。老实说，我发现“jsdo.it”使用起来有点笨拙，所以我没有想到特定的元素，但例如，给定结构：

<div id="ajax_container">
 <button id="do_something">Clicky!</button>
 <p>Some dynamically-loaded content</p>
</div>

其中 ajax_container 的内容被替换为Ajax 调用（无需显示该部分的代码），为该按钮的单击事件绑定一个未销毁的侦听器（容器 div），如下所示：

$('#ajax_container').on('click', '#do_something', function() {
 // do something
})

Answer 2

您必须发布一些代码才能确定为什么您的实现不起作用，但是您应该查看 jQuery 源代码以获取如何使用 .on() 和 .live() 的示例。

<div id="parent">
 <a href="#" id="anchor">Click Me</a>
</div>

$('#anchor').live('click',function() { }):
$('#parent').on('click','#anchor',function() { });
$('#anchor').on('click',function() { });

.live() 事件侦听器是添加到文档元素，以便只要事件一直冒泡到文档元素，就会触发回调

在第二个示例（ $('#parent').on() ）中，事件侦听器添加到父元素，每次点击事件时都会触发冒泡到 #parent 并来自（或沿途与其交互）名为 #anchor 的元素

。第三个示例 ( $('#anchor').on() ）将事件侦听器直接添加到锚元素本身，并且是与 $('#anchor').bind('click',function() { }) 完全相同；

引入 .live() 的原因是，如果页面结构发生变化，事件回调仍然可以被触发，因为事件侦听器本身附加到文档元素。

您可以在类似的方法中使用 on，但它必须将自身附加到未从页面中删除的元素 - 如果该元素被删除，那么所有事件侦听器也会随之删除。

http://api.jquery.com/on/
http://api.jquery.com/live/