Simple Analysis of ajax events under jQuery

Yesterday I wrote an article about the problem of dynamic element generation on the monitoring page, which caused some small controversy, but I learned a lot from it.
This article describes how to wait for the specified element to be loaded in jQuery.
Of course, the dynamically generated node elements are divided into many situations. Here we only analyze the problem of generating elements after ajax acquires data.

Yesterday, Xia commented below. I learned two methods: ajaxSuccess and DOMNodeInserted,
In the end, I chose ajaxSuccess instead of DOMNodeInserted.
It's not because DOMNodeInserted is not good. This method is still quite good. I have never seen it before. (I learned it first and kept it for future use)
Because DOMNodeInserted responds to each node once, there will be hundreds of thousands of judgments, resulting in unnecessary waste.
(PS: I don't know if my understanding is correct. If there is anything inappropriate, I hope you can point it out .)

So I chose ajaxSuccess, but there is still a problem: ajaxSuccess and the success method in $. ajax,
What is the sequence of execution of the done method recommended after jQuery 1.5?
Let's start with a simple test. The Code is as follows:

1 (function () {2 var box = $ ("# ajaxtest. docs-room "); // test data display area element 3 4 $ (" # btn-send "). click (function () {// bind send button 5 box.html (""); // clear the display area 6 7 $ ("<p>" courier .html (new Date ). toLocaleString ()). appendTo (box); // Add Test Event 8 $. ajax ({9 url: '/mvc/blog/news. aspx ', // nickname on the right, 10 data:' {"blogApp": "'+ currentBlogApp +'"} ', // blog blogApp11 type: 'post', 12 dataType: 'text', 13 contentType: 'application/json; char Set = UTF-8 ', 14 // The code lines from url to contentType are from the blog, which I will use directly. 15 success: function (data) {// call 16 $ ("<p>" successful .html ("success [" + $ (data ). eq (0 ). text () + "]"). appendTo (box); 17}, 18 complete: function (request) {// call 19 $ ("<p>" complete .html ("complete [" + $ (request. responseText ). eq (0 ). text () + "]"). appendTo (box); 20} 21 }). done (function (data) {// call after the request is successful (deferred object method) 22 $ ("<p>" example .html ("done success [" + $ (data ). eq (0 ). text () + "]"). appendTo (box); 23 }). always (function (data) {// call after the request is complete (deferred object method) 24 $ ("<p>" ways .html ("always complete [" + $ (data ). eq (0 ). text () + "]"). appendTo (box); 25}); 26}); 27 28 $ ("# btn-clear "). click (function () {// clear data 29 box.html (""); 30}); 31 32 $ (document ). ajaxSuccess (function (evt, request) {// ajax listener, all ajax requests are successfully executed 33 $ ("<p>" ja.html ("ajaxSuccess [" + $ (request. responseText ). eq (0 ). text () + "]"). appendTo (box); 34 }). ajaxComplete (function (evt, request) {// ajax listener, all ajax requests are executed for 35 $ ("<p>" ).html ("ajaxComplete [" + $ (request. responseText ). eq (0 ). text () + "]"). appendTo (box); 36}); 37 38 }());

Below is the test area. You can click test.

 

Test Control Area- Test data display area

The execution order was very interesting, and always ran before ajaxSuccess.
It is not the same as I expected. I can understand it only after reading the deferred object article,
I will not explain it here. You can find the information here, but done and always will only be available in Versions later than 1.5. Pay attention to this.

We are certain that ajaxSuccess will be executed after success and done, so we can be sure that the node has been generated,
Now we can patch these nodes. below is my code. Please review it,

1 (function () {// listen to ajax events 2 $ (document ). ajaxSuccess (function (evt, request, settings, data) {3 4 var patchs = {// page patch method set, you can write the Page name to which the patch is required. 5 CommentForm: function () {// comment page 6 $ ("# btn_comment_submit "). removeClass ("comment_btn "). addClass ("btn"); // submit button 7}, 8 sidecolumn: function () {// search page 9 $ (". div_my_zzk "). addClass ("input-append"); // search box 10 $ (". btn_my_zzk "). removeClass ("btn_my_zzk "). addClass ("btn"); // Search button 11} 12} 13 14 var _ key = settings. url. split ("/"). pop (). split (". "). shift (); // get the ajax url file name 15 patchs [_ key] & patchs [_ key] (); // if this patch exists, apply patches 16}); 17 })();

This will not cause too many judgments, and patch the request on the specified page.
This is the best method I can think of at present. If there is still a more perfect method, I hope you can enlighten me. :-)