jquery - 使用 live() - 好处 - 类似于 bind()

Question

我一直在阅读有关 jquery live event 的内容，但仍然有点困惑？使用它有什么好处？

http://docs.jquery.com/Events/live

我知道它与绑定(bind)类似，但这两个事件对我来说仍然不合适。

只是寻找一些指针。

Answer 1

Warning: This answer is old. Still very useful, but live has been deprecated and removed in newer versions of jQuery. So read the answer, because the use cases haven't changed, and you will learn why and when to use less event handlers. But unless you are still using a really old version of jQuery (v1.4.2 or prior), you should considerer writing the new equivalent code instead. As documented in the jQuery API for live and copied here:

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

1. $( selector ).live( events, data, handler ); // jQuery 1.3+
2. $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
3. $( document ).on( events, selector, data, handler ); // jQuery 1.7+

有时，页面加载时您会看到一组元素，例如编辑链接:

<table>
  <tr>
    <td>Item 1</td>
    <td><a href="#" class="edit">Edit</a></td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td><a href="#" class="edit">Edit</a></td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td><a href="#" class="edit">Edit</a></td>
  </tr>
</table>

现在，也许您使用 jQuery 有类似的东西:

$(document).ready(function() {
  $('a.edit').click(function() {
    // do something
    return false;
  });
});

但是，如果在页面初始加载后动态向该表添加新元素会怎样？

$('table').append('
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr>
');

当您单击这个新项目上的“编辑”时，不会发生任何事情，因为事件是在页面加载时绑定(bind)的。进入直播。有了它，你可以像这样绑定(bind)上面的事件:

$(document).ready(function() {
  $('a.edit').live('click', function() {
    // do something
    return false;
  });
});

现在，如果您添加任何新的 <a>类为 edit 的元素页面初始加载后，仍会注册此事件处理程序。

但是这是如何实现的呢？

jQuery 使用所谓的事件委托(delegate)来实现此功能。在这种情况下或者当您想要加载大量处理程序时，事件委托(delegate)很有帮助。假设您有一个带有图像的 DIV:

<div id="container">
    <img src="happy.jpg">
    <img src="sad.jpg">
    <img src="laugh.jpg">
    <img src="boring.jpg">
</div>

但是您有 100、200 或 1000 个图像，而不是 4 个图像。您希望将单击事件绑定(bind)到图像，以便在用户单击图像时执行 X 操作。按照您的预期进行操作...

$('#container img').click(function() {
    // do something
});

...然后将绑定(bind)数百个处理程序，它们都执行相同的操作!这是低效的，并且可能会导致重型网络应用程序性能下降。通过事件委托(delegate)，即使您不打算稍后添加更多图像，对于这种情况，使用 live 也会更好，因为您可以将 one 处理程序绑定(bind)到容器并检查何时如果目标是图像，则单击，然后执行操作:

// to achieve the effect without live...
$('#container').click(function(e) {
    if($(e.target).is('img')) {
        performAction(e.target);
    }
});

// or, with live:
$('img', '#container').live('click', function() {
    performAction(this);
});

由于 jQuery 知道可以稍后添加新元素或者性能很重要，因此它可能不会将事件绑定(bind)到实际图像，而是会像第一个示例中那样向 div 添加一个事件(实际上，我很喜欢确保它将它们绑定(bind)到主体，但也可能绑定(bind)到上例中的容器)，然后委托(delegate)。这个e.target属性可以让它在事后检查单击/操作的事件是否与您可能指定的选择器匹配。

要明确的是:这不仅有助于直接避免重新绑定(bind)事件，而且对于大量项目来说，速度会显着加快。