Question

I have been trying to fix this issue for the past 2-3 hours but finally gave up. This is part of my javascript/jquery.

$(function() {  
    $('#ob').change(function() {
       var id = $("#ob").val();  
       var form_data = {
           id: id,
           OB: 3 
       };

       $.ajax({
           url: "changeinfo.php",
           type: 'POST',
           data: form_data,
           success: function(data) {
               $("#finfoob3").html(data);                             
           }
       });

       return false; 
   });
});  

The above successfully modifies a DIV element on change.

However in that DIV element, there was a button with id=obt3 which doesn’t work. Actually, it was overwriting it’s name to something else. I sent another POST value OB to the AJAX call and concatenate it with obt so that it becomes obt3. I then put the id of the button to obt3 but it still wouldn’t respond to a click event.

I tried to inspect the element with google chrome and the element’s id successfully changes to obt3 but wouldnt respond to it’s click event.

Answer 1

The problem is that when you replaced the contents of #finfoob3 you destroyed all the nodes that lived there, along with all their event handlers. There are two ways to handle this:

• After replacing the div contents, re-create any event handlers you need.
• Use Event Delegation to attach the event handlers to #finfoob3, so they won’t be destroyed when you change its contents.

Since you are using jQuery, you should look at the .on() function. It gives you an easy way to define event delegation.