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 issue of generating elements after obtaining data.

A man commented below yesterday. I learned two methods: listening and listening,
In the end, I chose not to use it.
It's not because it's not good. This method is still quite good. I have never seen it before (I learned it first and kept it for later use)
It is only because each node has a response to Chengdu, so 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 it, but there is still a problem, with the method in $,
What is the sequence of execution of the methods recommended by jQuery in the future?
Let's start with a simple test. The Code is as follows:

 (      box = $("#ajaxtest .docs-room");           $("#btn-send").click((){          box.html("");                   $("<p>").html( ( Date).toLocaleString() ).appendTo(box);               url: '/mvc/blog/news.aspx',              data: '{"blogApp":"' + currentBlogApp + '"}',              type: 'post'             dataType: 'text'             contentType: 'application/json; charset=utf-8'                          success: (data) {                  $("<p>").html( "success [ " + $(data).eq(0).text() + " ]"              complete: (request) {                  $("<p>").html("complete [ " + $(request.responseText).eq(0).text() + " ]"          }).done((data) {              $("<p>").html("done success [ " + $(data).eq(0).text() + " ]"         }).always((data) {              $("<p>").html("always complete [ " + $(data).eq(0).text() + " ]"            $("#btn-clear").click((){          box.html(""           $(document).ajaxSuccess((evt, request){          $("<p>").html("ajaxSuccess [ " + $(request.responseText).eq(0).text() + " ]"     }).ajaxComplete((evt, request){          $("<p>").html("ajaxComplete [ " + $(request.responseText).eq(0).text() + " ]"       }());

Below is the test area. You can click test.

 

Test Control Area- Test data display area

I found the execution order interesting and ran to the front.
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 relevant materials by yourself. However, you can use the materials in a later version. Pay attention to this.

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

 ((){      $(document).ajaxSuccess(               patchs = {              CommentForm: (){                  $("#btn_comment_submit").removeClass("comment_btn").addClass("btn");               sidecolumn: (){                 $(".div_my_zzk").addClass("input-append");                  $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn");                      _key = settings.url.split("/").pop().split(".").shift();          patchs[_key] && patchs[_key]();   })();

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. :-)