使用live()-好处-类似于bind() [英] Using live() - benefits - similar to bind()

问题描述

我一直在阅读jquery现场事件，仍然有些困惑吗?使用它有什么好处?

I have been doing some reading up on jquery live event and am still kind of confused? What is the benefit to using it?

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

我知道绑定很相似，但是我仍然觉得这两个事件都没有.

I know it is similar to bind but both of those events still seem off to me.

只需寻找一些指针.

推荐答案

警告:此答案很旧. 仍然非常有用，但live已被不推荐使用，并已在较新版本的jQuery中删除.因此，请阅读答案，因为用例没有改变，您将了解为什么和何时使用较少的事件处理程序.但是，除非您仍在使用旧版本的jQuery(v1.4.2或更低版本)，否则您应该考虑编写新的等效代码.如用于live 的jQuery API所述，并在此处复制:

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:

根据后继方法重写.live()方法很简单；这些是用于所有三种事件附件方法的等效调用的模板:

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+

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+

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

Sometimes you have a set of elements when the page loads, like, say, edit links:

<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中有类似的东西:

Now, maybe you have something like this with jQuery:

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

但是，如果在页面最初加载后向该表中动态添加新元素怎么办?

But what if you add a new element to this table dynamically, after the page has initially loaded?

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

当您单击此新项目上的编辑"时，将不会发生任何事情，因为这些事件是在页面加载时绑定的.输入直播.有了它，您可以像这样绑定上面的事件:

When you click on "Edit" on this new Item, nothing will happen because the events were bound on page load. Enter live. With it, you can bind the event above like this:

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

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

Now if you add any new <a> elements with a class of edit after the page has initially loaded, it will still register this event handler.

但这是如何完成的?

jQuery使用所谓的事件委托来实现此功能.在这种情况下或要加载大量处理程序时，事件委托很有用.假设您有一个包含图片的DIV:

jQuery uses what is known as event delegation to achieve this functionality. Event delegation is helpful in this situation or when you want to load a large amount of handlers. Say you have a DIV with images:

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

但是您有100个，200个或1000个，而不是4个图像.您想将click事件绑定到图像，以便在用户单击它时执行X操作.像您期望的那样做...

But instead of 4 images, you have 100, or 200, or 1000. You want to bind a click event to images so that X action is performed when the user clicks on it. Doing it as you might expect...

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

...然后将绑定数百个都执行相同操作的处理程序！这效率低下，并可能导致繁重的Web应用程序性能下降.使用事件委托，即使您不打算以后再添加更多图像，使用live也会对这种情况更好，因为您可以将一个处理程序绑定到容器并检查其时间如果目标是图像，则单击，然后执行操作:

...would then bind hundreds of handlers that all do the same thing! This is inefficient and can result in slow performance in heavy webapps. With event delegation, even if you don't plan on adding more images later, using live can be much better for this kind of situation, as you can then bind one handler to the container and check when it is clicked if the target was an image, and then perform an action:

// 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知道以后可以添加新元素或者性能很重要，因此与其将事件绑定到实际图像上，不如将其绑定到实际图像上，它可能像在第一个示例中那样向div添加一个(实际上，我很漂亮确保将它们绑定到主体，但在上面的示例中可能会绑定到容器)，然后委派.此e.target属性可以让它在事件被单击/作用后是否与您可能指定的选择器相匹配的情况下进行检查.

Since jQuery knows that new elements can be added later on or that performance is important, instead of binding an event to the actual images, it might add one to the div like in the first example (in reality, I'm pretty sure it binds them to the body but it might to the container in the example above) and then delegate. This e.target property can let it check after the fact if the event that was clicked/acted on matches the selector that you might have specified.

明确说明:这不仅在不必重新绑定事件的直接方式中很有用，而且对于大量项目而言，它可以显着提高速度.

To make it clear: this is helpful not only in the direct way of not having to rebind events, but it can be dramatically faster for a large amount of items.

这篇关于使用live()-好处-类似于bind()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！