javascript - Ajax call is breaking Jquery toggle function -

I have a basic toggle function, when the item is initially clicked, it sends an AJAX post, and The second time it sends a second separate AJAX post.

Once it calls AJAX, the second toggle function no longer fires.

When I removed the Ajax function from toggle and changed them

Below is my code:

You will see that I have a basic show for the first / Hide function is for testing purposes, click Use this code for the first time, the second click works and AJAX calls, but after doing nothing, nobody clicks.

  // Sort Tool ACS or DESC $ ("th # seeking") () (function) (//) First click update sorting order $ ("a.add_listing") (200); $ ("a.add_listing") Show (200);}, function () Click on second order in sequence of order $ .ajax ({type: "POST", url: "ajax_calls .php ", data:" order = instrument_asc and sort_item = true ", success: function (r) {$ (" # listing () ". Html (r);}, error: function () {warning (2); $ ("# Error"). Text ("The post could not be retrieved"). FadeIn (300) .delay (900) FedEt (300)}})});   
 Any help on this would be greatly appreciated. Thank you very much   
 
 
 if clicked with element The part of the page has been replaced with AJAX results, the handler will be lost. You can do something like this instead:  
  $ (function () {var toggleState = 0; $ ('body' Delegate ('th # demand', 'click', function) ({ToggleState === 0} {$ ("a.add_listing"). Hide (200); $ ("a.add_listing") Shows (200);} and {$ AJAX ({type: "post", url: "ajax_calls.php", data: "order = instrument_asc and sort_item = true", success: function (r) {$ ("# listings"). Html (r);} , Error: function () (warning (2); $ ("# error"). Text ("the post could not be retrieved") .FadeIn (300) .delay (900). FadeOut (300)}}); } ToggleState = toggleState ^ 1;});});   
 This sets a "click" handler and tracks the toggle position explicitly, but the handler works on this event because it  & lt; Body & gt;  (If you want you can put handlers near a container in the dome) Thus, if you change the fragment of the page, until the new fragment table has the title "id" value, Then delegated event handlers will "see" it.  
  Edit  - I changed a bit and indicated that it should be done in a "ready" handler, or in some other way, that  & lt; Body & gt;  element is present in the DOM if the code is set as "ready" or "load" as the handler,  & lt; Script & gt;  Block  & lt; Head & gt; , then  & lt; Body & gt;  will not be there and it will not do anything.  
  Re-edit  - There is a duplicate-up demo in my code above a big (finally "") "is missing) I have decided in that bella, And also that I will do the same here.