使用live delegate on解决js后装html故障问题

今天写一个前端的东西。每学到更多的知识。几下就能写几行代码、代码行数十个、代码几个文件量……这是真的。一直以来研究的前端遇到的问题仍然在实践百度谷歌问答。

我今天遇到这样的问题：已经写js代码，正确ajax加载html不灵。
随着几组keyword，最后这组帮我找到了解答的办法：
   

 javascript not work on ajax content

非常幸运，我来到了：http://stackoverflow.com/questions/10161938/jquery-function-not-working-on-ajax-loaded-content 

有经验的人回答了：

When you initially created the .click() handler, that second button was not yet in the DOM, so jQuery could not attach an event handler to it. The .live() function will work for any element that is already in the DOM and also any element that will be added in the future (e.g. from an ajax call).

就是说。live能够将事件绑定到已经载入或没有载入的DOM里。

将原来写的

jQuery('.ajaxCommentMiniList a').click(function(){
  alert(123);
  
  return false;
 });

改成：

jQuery('.ajaxCommentMiniList a').live('click', function(){
  alert(123);
  
  return false;
 });
就可以。

网上不少文章建议使用delegate而不是live,甚至还有on。

http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate 

This, however, seems to me to be much more explicit about what is actually happening. You don't realise from the live example that the events are actually being captured on document; with delegate, it is clear that the event capturing happens on #containerElement. You can do the same thing with live, but the syntax becomes increasingly horrid.

Specifying a context for your events to be captured also improves performance. With the live example, every single click on the entire document has to be compared with the selector a.myClass to see if it matches. With delegate, that is only the elements within #containerElement. This will obviously improve performance.

Finally, live requires that your browser looks for a.myClass whether or not it currently exists. delegate only looks for the elements when the events are triggered, giving a further performance advantage.

NB delegate uses live behind the scenes, so you can do anything with live that you can do with delegate. My answer deals with them as they are commonly used.

Note also that neither live nor delegate is the best way to do event delegation in modern jQuery. The new syntax (as of jQuery 1.7) is with the on function. The syntax is as follows:

$('#containerElement').on('click', 'a.myClass', function() { ... });


看来on是更好的解决方式。于是我最后的代码改为：

 jQuery('.ajaxCommentMiniList').on('click', '.pagination a',function(){
		ajaxCommentMiniList.clickAction(jQuery(this));		
		return false;
	});

找个时间研究一下:live VS delegate VS on。我希望这帮助部分遇到了同样的问题，我的朋友。

版权声明：本文博客原创文章，博客，未经同意，不得转载。