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

Question

我一直在阅读关于jquery现场活动的一些内容,我还是有点困惑吗？使用它有什么好处？

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

我知道它与bind类似,但这些事件似乎仍然不适合我.

只是寻找一些指针.

Answer 1

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

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

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>
');

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

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

现在,如果您在页面初始加载后添加<a>了一个类的新元素edit,它仍将注册此事件处理程序.

但这是如何实现的？

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

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

但是,不是4个图像,而是100或200或1000.您希望将单击事件绑定到图像,以便在用户单击它时执行X操作.按照你的预期做到这一点......

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

...然后将绑定数百个处理程序,所有处理程序都做同样的事情!这是低效的,并且可能导致繁重的webapps性能下降.使用事件委托,即使您以后不打算添加更多图像,使用live也可以更好地处理这种情况,因为您可以将一个处理程序绑定到容器,并检查单击目标是否为何时单击它图像,然后执行操作:

// 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如果单击/执行的事件与您可能指定的选择器匹配,则此属性可以在事后检查.

为了说清楚:这不仅有助于不必重新绑定事件的直接方式,而且对于大量项目来说可以大大加快.