使用live delegate on來解決js對後載入的html失效的問題

標籤：javascript   jquery   

今天要寫一個前端的東西。每多學一點知識，就可以少寫幾行代碼、幾十行代碼、幾個檔案量的代碼……這是真的。一直對前端的研究都是停留在遇到問題百度Google答案的做法。今天遇到這樣一個問題：已經寫好的js代碼，對ajax載入的html失效了。
用好幾組關鍵字都沒有找到答案，最後這組幫我找到瞭解答的辦法：
   

 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。希望本文幫到部分遇到與我同樣問題的朋友。