Event Not triggered after Ajax Response Jquery

Question

I have a country drop down, and on change of it I return a div containing the same country drop down with additional fields.

I replace this entire div using the below code. But after the replace of div is done, the on change event stops working further. How can I fix this ?

    $("#country).on("change", function(){
        var str = $("#myform").serialize();
        $.ajax({
            type: 'POST',
            data:str,
            url:'../changeme',
            success: function(data){

                debugger;

                var html = $.parseHTML(data);
                var arrSelector = $(html).find('div[data-refresh=true]');
                var i;
                for(i=0;i<arrSelector.length;i++)
                {

                    $('#' + arrSelector[i].id).replaceWith($($(data)).find('#' + arrSelector[i].id));
                }
            },
            done:function(data){

            },
            error:function(data){

            },
            complete:function(data){

            }
        });
    });
},

`$("#country")` not `$("#country)` – Linga Dec 28 '13 at 10:24 — Linga, Dec 28 '13 at 10:24

score 2 · Accepted Answer · answered Dec 27 '13 at 23:48

Events won't get called on dynamically created html through the normal means. Use the following instead, and it should get called even after you replace the div containing the country dropdown:

$(document).on('change', '#country', function() { ... });

score 1 · Answer 2 · answered Dec 27 '13 at 23:50

1

You have several choices

Don't replace whole element, just replace it's contents. WHen you replace an element it's event bindings are lost

-OR-

Delegate event handler

 $(document).on('change',  '#country', function(){
    /* same code you already have*/
  })

answered Dec 27 '13 at 23:50

charlietfl

170,828
13
121
150

Thanks charlietfl, could only accept one answer ( same as Kai ) – Novice User Dec 28 '13 at 00:04

score 0 · Answer 3 · answered Dec 27 '13 at 23:48

Try to put the whole onChange event code in a init function and call this function every time you replace your div.

function initOnChange() {
  $("#country).on("change", function(){ 
    ...
    success: function(data){
      ...
      initOnChange();
      ...
    }
    ...
  });
}

Event Not triggered after Ajax Response Jquery

3 Answers3