Use live delegate on to solve the problem of html invalidation after js Loading

I want to write a front-end item today. Every time you learn more, you can write less lines of code, dozens of lines of code, a few pieces of code with a few files ...... This is true. The front-end research has always been focused on Baidu Google's answer to the problem. Today, I encountered a problem: the JavaScript code that has been written is invalid for the html loaded by ajax.
No answers were found with several sets of keywords. The last group helped me find a solution:

Javascript not work on ajax content

Fortunately, I came to: http://stackoverflow.com/questions/10161938/jquery-function-not-working-on-ajax-loaded-content

Experienced people answered:

When you initially created. click () handler, that second button was not yet in the DOM, so jQuery cocould 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 ).

That is to say, live can bind events to the loaded or not loaded DOM.

Write the original

JQuery ('. ajaxCommentMiniList A'). click (function (){
Alert (123 );

Return false;
});

Changed:

JQuery ('. ajaxCommentMiniList A'). live ('click', function (){
Alert (123 );

Return false;
});
You can. Many articles on the Internet suggest using delegate instead of live, and even 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 realize 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. myClass to see if it matches. with delegate, that is only the elements within # containerElement. this will obviusly 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 (){...});


It seems that on is a better solution. So I changed the final code:

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

Find a time to study: live VS delegate VS on. I hope this article will help some of my friends who have the same problems as me.