Question

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

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

我知道它与bind类似，但这些事件似乎都不适合我。

只是寻找一些指示。

Answer 1

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


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


$( selector ).live( events, data, handler ); // jQuery 1.3+

$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.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属性可以让它在事后检查。

要说清楚：这不仅有助于不必重新绑定事件的直接方式，而且对于大量项目来说可能会大大加快。

Answer 2

基本上，使用.live()，如果您拥有一个非常动态的网站，则无需更新事件处理程序。

$('.hello').live('click', function () {
  alert('Hello!');
});

该示例将click事件绑定到已经具有“hello”类的任何元素以及动态插入的任何元素，无论是AJAX还是旧式JavaScript。 / p>

Answer 3

好处是，在创建这些元素时，事件处理程序也将添加到新的匹配元素中。这使您无需在每次创建需要它的新元素（匹配以前使用的选择器）时手动添加事件处理程序。

在jQuery 1.3中添加：绑定处理程序为所有人举办活动（如点击）当前 - 和未来 - 匹配元件。

来自http://docs.jquery.com/Events/live#typefn，强调我的。

使用live（） - 好处 - 类似于bind（）

3 个答案: