.live() 与 .on() 方法

Question

我正在做一个项目，在该项目中，当我使用 .live() 方法继续按下 min/plus 按钮而不将鼠标悬停在图片上时，该功能起作用。在.on() 方法的情况下，该功能不起作用。

我该如何解决这个问题，所以它也适用于.on() 方法？

这也是我所指的an example（我修复了此示例中的错误，但我使用的.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/