使用php发送POST请求后，jquery脚本无法正常工作

Question

I have a page generated using php, and after i send a post request from page on itself javascript stop working. How can i fix it? I need to change my page content using php. My script looks like:

$(function(){
 my code here...
});

And i'm sending request with this function:

function sendPostRequest(params){
       var xmlhttp=new XMLHttpRequest();
       xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200)document.body.innerHTML=xmlhttp.responseText;};
       xmlhttp.open("POST","catalog_main.php",false);
       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       document.body.innerHTML="";
       xmlhttp.send(params);
     }

Answer 1

I'm guessing that when you say "javascript stops working" you mean that events which have a javscript function tied to them are not firing that function.

I think the root of the problem is:

document.body.innerHTML=xmlhttp.responseText

If you bind a function to an event at page load then you are binding it to the event on a specific element. When you run the above you remove all elements in the page body and replace them with new ones. The new ones may have the same class/id but they are new elements which do not have any events bound.

There are two solutions: either encapsulate all your event binding in a function, which you run both on page load and after replaceing the page as above or use only delegated events where all events are techically bound to the body element itself.

Edit: I see the questions is tagged jQuery (I wonder why ypou are not using $.ajax in this case?). Using jQuery you can do the delegated events as such: Instead of

$(function(){
   $('#foo').click(function(){
      alert('Foo clicked');
   });
   $('.bar').change(function(){
      //do something
   });
});

You can use

$(function(){
   $('body')
   .on('click', '#foo', function(){
      alert('Foo clicked');
   })
   .on('change', '.bar', function(){
      //do something
   });
});

For more info see the jQuery docs on .on()

Second Edit

To use the first option (9encapsulate all events in a function) then, based on the same events as the above example, change the document ready to the following:

function set_events(){
   $('#foo').click(function(){
      alert('Foo clicked');
   });
   $('.bar').change(function(){
      //do something
   });
}
$(function(){
   set_events();
});

Then change you ajax response habndler to xmlhttp.onreadystatechange = function(){

  if (xmlhttp.readyState==4 && xmlhttp.status==200){
     document.body.innerHTML=xmlhttp.responseText;
     set_events();
  }

};