jquery .live('click')vs .click()

Question

我想知道是否有任何情况下使用.click(function {...});而不是.live('click', function {...});？

从我收集的内容来看,live选项似乎是一个更好的选择,因此我几乎在所有情况下都使用它而不是简单的.click(),特别是考虑到我的很多代码是异步加载的.

编辑:这个问题的另一部分.如果我异步加载所有的javascript,.click仍将拾取已经在dom中的所有元素.对？

Answer 1

有时您可能明确希望仅将click处理程序分配给已存在的对象,并以不同方式处理新对象.但更常见的是,现场并不总是有效.它不适用于链式jQuery语句,例如:

$(this).children().live('click',doSomething);

由于事件冒泡DOM树的方式,它需要一个选择器才能正常工作.

编辑:有人刚刚赞成这一点,显然人们仍在关注它.我应该指出live并且bind都被弃用了.你可以同时执行.on(),IMO是一个更清晰的语法.要替换bind:

$(selector).on('click', function () {
    ...
});

并取代live:

$(document).on('click', selector, function () {
    ...
});

$(document)您可以使用任何包含您监视点击的所有元素的jQuery对象,而不是使用它,但是当您调用它时,相应的元素必须存在.

Answer 2

(注意29/08/2017: live许多版本之前已弃用并在v1.9中删除.delegate在v3.0中已弃用.在这两种情况下,请使用代理签名on[也包含在下面].)

live通过捕获事件,当它从DOM一直向上冒泡到文档根目录,然后查看源元素时发生.click通过捕获元素本身的事件来实现.因此,如果您正在使用live,并且其中一个祖先元素直接挂钩事件(并阻止它继续冒泡),您将永远不会在您的元素上看到该事件.通常情况下,最接近事件的元素(点击或其他)首先抓住它,混合live和非live事件可以以微妙的方式改变.

例如:

jQuery(function($) {

  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<!-- Using an old version because `live` was removed in v1.9 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

我建议你使用delegate过live的时候就可以了,这样你就可以更彻底的控制范围; 使用delegate,您可以控制捕获冒泡事件的根元素(例如,live基本上delegate使用文档根作为根).此外,建议避免(在可能的情况下)使用非委派的非实时事件处理delegate或live与之交互.

几年后,你不会使用任何一个live或delegate; 您使用委托签名on,但概念仍然相同:事件挂钩在您调用的元素on上,但只有当后代匹配事件名称后面给出的选择器时才触发:

jQuery(function($) {

  $(document).on('click', 'span', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

设置事件时,必须存在与.click关联的所有对象.

示例:(在伪代码中)附加可以是$("body").append()例如

append('<div id="foo" class="something">...</div>');
$("div.something").click(function(){...});
append('<div id="bar" class="something">...</div>');

单击适用于foo,但不适用于bar

例2:

append('<div id="foo" class="something">...</div>');
$("div.something").live("click",function(){...});
append('<div id="bar" class="something">...</div>');

点击适用于foo和bar

使用.live('click'...您可以在创建事件后动态添加更多对象,并且点击事件仍然有效.

Answer 4

动态生成代码时需要"live".看看下面的例子:

$("#div1").find('button').click(function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div1')
})
$("#div2").find('button').live("click", function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div2')
})

button {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="div1">
  <button>Click</button>
</div>
<div id="div2">
  <button>Live</button>
</div>

如果没有"实时",只有当您单击第一个按钮时才会发生单击事件,"实时"也会为动态生成的按钮发生单击事件