jquery .live（'click'）vs .click（）
我想知道是否有任何情况下最好使用.click(function {...}); 而不是.live('click', function {...}); ？
从我收集的生活选项似乎是一个更好的select，因此，我几乎在所有情况下使用它，而不是简单的.click（），尤其是考虑到我的代码很多是asynchronous加载。
编辑：这个问题的另一部分。 如果我不同步地加载所有的JavaScript，.click仍然会拾取已经在DOM中的所有元素。 对？
有时候你可能只想把click处理程序分配给已经存在的对象，并且不同地处理新的对象。 但更普遍的是，生活并不总是工作。 它不适用于链式jQuery语句，如：
$(this).children().live('click',doSomething);
它需要一个select器才能正常工作，因为事件会冒泡DOM树。
编辑：有人刚刚提出这个，显然人们仍然在看。 我应该指出， live和bind都被弃用了 。 您可以使用.on()来执行这两个.on() ，其中IMO是一个更清晰的语法。 要replacebind ：
$(selector).on('click', function () { ... });
并取代live ：
$(document).on('click', selector, function () { ... });
您可以使用任何jQuery对象，而不是使用$(document) ，其中包含您监控点击的所有元素，但调用该对象时必须存在相应的元素。
（ 注意29/08/2017： live已经被许多版本弃用了，并且在v1.9中被移除了， delegate在v3.0中被弃用了，在这两种情况下，都使用了on的委托签名。
live通过捕获事件，当它一直冒泡到文档根目录，然后查看源代码元素。 通过捕获元素本身的事件来进行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>
设置事件时，所有与.click关联的对象都必须存在。
例子:(在伪代码中）append可以是$("body").append()例如
append('<div id="foo" class="something">...</div>'); $("div.something").click(function(){...}); append('<div id="bar" class="something">...</div>');
点击foo的作品，但不适用于酒吧
例2：
append('<div id="foo" class="something">...</div>'); $("div.something").live("click",function(){...}); append('<div id="bar" class="something">...</div>');
点击foo和bar的作品
使用.live（“点击”…你可以在创build事件后dynamic地添加更多的对象，单击事件仍然可以工作。
dynamic生成代码时需要“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>
如果您不dynamic添加元素， click始终使用click 。
通过将事件侦听器添加到文档根目录并监听冒泡事件来进行live工作。 另一种方法是delegate ，它的工作原理相同，但将事件处理程序绑定到指定的元素。
这样，事件就不会冒泡整个DOM，并且会被更早地捕获。
如果在初始页面加载之后添加元素，则使用.live（）。 假设你有一个button，在页面加载完成后，通过AJAX调用添加一个button。 这个新的button不能使用.click（）访问，所以你必须使用.live（'click'）
从我所了解的主要区别是，live（）保持睁大眼睛寻找与您正在工作的select器相匹配的新DOM元素，而click（）（或绑定（'click'））附加事件钩子并完成。
鉴于你的代码是asynchronous加载的，使用live（）会让你的生活变得更加简单。 如果你不知道你正在加载的代码是什么，但是你知道你会听什么types的元素，那么使用这个函数是非常有意义的。
在性能增益方面，使用live（）的一个替代方法是实现AJAXcallback函数来重新绑定事件挂钩。
var ajaxCallback = function(){ $('*').unbind('click'); $('.something').bind('click', someFunction); $('.somethingElse').bind('click', someOtherFunction); }
你将需要保持正确的跟踪你的事件挂钩，并确保这个函数重新绑定正确的事件。
ps Ajax方法.get（），.post（），.load（）和.ajax（）都让你指定一个callback函数。
由于“live”将处理与当前select器匹配的未来元素的事件，因此您可以select点击，因为您不希望发生这种情况 – 您只想处理当前选定的元素。
另外，我怀疑（虽然没有证据），使用“点击”而不是使用“点击”有一点效率。
背风处
如果你需要简化代码，那么在大多数情况下，生活更好。 如果你需要得到最好的performance，那么委托总是比现场好。 绑定（点击）与委托并不是那么简单的问题（如果你有很多类似的项目，那么委托会更好）。
请记住使用“live”是为“jQuery 1.3”或更高
在版本“jQuery 1.4.3”或更高版本中使用“委托”
和版本“jQuery 1.7 +”或更高版本被用于“开”
$( 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+
从jQuery 1.7开始，.live（）方法已被弃用。
问候，费尔南多
除了TJ Crowders的回答 ，我还增加了一些处理程序 – 包括更新的.on(...)处理程序，以便您可以查看哪些事件被隐藏，哪些不是。
我还发现， .live()不仅被弃用，而且从jQuery 1.9.x开始被删除。 但其他的，即
.delegate ， .delegate / .undelegate和.on / .on
仍然在那里。
另外请注意在这里Stackoverflow有更多关于这个话题的讨论。
如果您需要修复依赖于.live的遗留代码，但您需要使用新版本的jQuery（> 1.8.3），则可以使用以下代码修复它：
// fix if legacy code uses .live, but you want to user newer jQuery library if (!$.fn.live) { // in this case .live does not exist, emulate .live by calling .on $.fn.live = function(events, handler) { $(this).on(events, null, {}, handler); }; }
以下代码片段的意图是TJ脚本的扩展，您可以立即尝试一下，如果绑定了多个处理程序会发生什么情况 – 请运行代码片段并单击以下文本：
jQuery(function($) { // .live connects function with all spans $('span').live('click', function() { display("<tt>live</tt> caught a click!"); }); // --- catcher1 events --- // .click connects function with id='catcher1' $('#catcher1').click(function() { display("Click Catcher1 caught a click and prevented <tt>live</tt> from seeing it."); return false; }); // --- catcher2 events --- // .click connects function with id='catcher2' $('#catcher2').click(function() { display("Click Catcher2 caught a click and prevented <tt>live</tt>, <tt>delegate</tt> and <tt>on</tt> from seeing it."); return false; }); // .delegate connects function with id='catcher2' $(document).delegate('#catcher2', 'click', function() { display("Delegate Catcher2 caught a click and prevented <tt>live</tt> from seeing it."); return false; }); // .on connects function with id='catcher2' $(document).on('click', '#catcher2', {}, function() { display("On Catcher2 caught a click and prevented <tt>live</tt> from seeing it."); return false; }); // --- catcher3 events --- // .delegate connects function with id='catcher3' $(document).delegate('#catcher3', 'click', function() { display("Delegate Catcher3 caught a click and <tt>live</tt> and <tt>on</tt> can see it."); return false; }); // .on connects function with id='catcher3' $(document).on('click', '#catcher3', {}, function() { display("On Catcher3 caught a click and and <tt>live</tt> and <tt>delegate</tt> can see it."); return false; }); function display(msg) { $("<p>").html(msg).appendTo(document.body); } });
<!-- with JQuery 1.8.3 it still works, but .live was removed since 1.9.0 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <style> span.frame { line-height: 170%; border-style: groove; } </style> <div> <span class="frame">Click me</span> <span class="frame">or me</span> <span class="frame">or me</span> <div> <span class="frame">I'm two levels in</span> <span class="frame">so am I</span> </div> <div id='catcher1'> <span class="frame">#1 - I'm two levels in AND my parent interferes with <tt>live</tt></span> <span class="frame">me too</span> </div> <div id='catcher2'> <span class="frame">#2 - I'm two levels in AND my parent interferes with <tt>live</tt></span> <span class="frame">me too</span> </div> <div id='catcher3'> <span class="frame">#3 - I'm two levels in AND my parent interferes with <tt>live</tt></span> <span class="frame">me too</span> </div> </div>
