OnChange event succesfully completes but renders other elements useless

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.

What's your question here? Are you simply looking for someone to review your code? — adamb, Nov 01 '12 at 18:03
Question is, when i trigger the change event of #ob, it modifies a div element called #finfoob3. Within #finfoob3, there is a button with id=obt3. Before triggering the on change event, obt3 works fine. Triggering it again, obt3 doesn't work since the div element is replaced. Still, i tried to rename obt3 within the replaced html but it wouldn't respond to obt3 click event. — , Nov 01 '12 at 18:06

score 0 · Accepted Answer · edited May 23 '17 at 11:43

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.

score 0 · Answer 2 · answered Nov 01 '12 at 18:11

0

This may help.

$(document).on("click", "#obt3", function() {
       //do whatever
   });

Here we're binding the document with all the dynamically created #obt3 elements.

answered Nov 01 '12 at 18:11

Pulkit Mittal

5,286
5
19
26

score 0 · Answer 3 · answered Nov 01 '12 at 18:15

If I understand correctly your question. You have a div with id finfoob3 and in this div you have a button with id obt3 and you have an event click handler on this button, and you have another element with id ob, which change trigger call ajax and return some html code with a button obt3, which is same like button which you have previously, but now it is not responding to click event

and this obt3 event handler is something like this

$('#obt3').click(function(){ 
    //Some code which you want to perform
});

but it is not working so change it to

$('#finfoob3').on('click', '#obt3' ,function(){ 
    //Some code which you want to perform
});

and it will work as you want, but make sure you are using jquery version 1.6 or later.

OnChange event succesfully completes but renders other elements useless

3 Answers3