jquery events not working after dynamically adding elements with ajax call

Question

its weird that all my jquery events turn unresponsive after a ajax call. Im a load function call and once the jsp reloads all the events just do not respond. any help ?

the following is the code which triggers the function call.

$('#personTypeId').on('change', function() {
    var selectId = document.getElementById("personTypeId").value;
    if (selectId == 1 || selectId == 4 || selectId == 8) {
        $("#directoryFilter").load("directory/filters #directoryFilter",{"selectId" : selectId  });

    }
});

look at [event delegation](http://learn.jquery.com/events/event-delegation/) — Arun P Johny, Apr 28 '14 at 03:03
can you share a sample event handler which is not triggering — Arun P Johny, Apr 28 '14 at 03:04
See [here](http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409) and [here](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376) for how to use the delegated version of `.on()`. — jfriend00, Apr 28 '14 at 03:04
you need to do something like `$("#directoryFilter").on('event-name', 'target-eleement-selector', function(){})` — Arun P Johny, Apr 28 '14 at 03:04
@ArunPJohny ...$('#subFilter').on({ 'click' : persons.loadFilterDropdown, }); this is one of the events not triggering — user2707760, Apr 28 '14 at 03:07
so as a other shared link has shown you.. you need to use `$("#directoryFilter").on('change', '#subFilter', function(){})` — Arun P Johny, Apr 28 '14 at 03:08

Navneil Naicker · Accepted Answer · 2014-04-28T03:21:28.587

0

$(document).on("change", "#personTypeId", function(){
    var selectId = document.getElementById("personTypeId").value;
    if (selectId == 1 || selectId == 4 || selectId == 8) {
            $("#directoryFilter").load("directory/filters #directoryFilter",{"selectId" : selectId  });
    }
});

edited Apr 28 '14 at 03:21

answered Apr 28 '14 at 03:08

Navneil Naicker

3,421
2
18
31

i want the a on change event to trigger for the selector #personTypeid but in the example you showed we are not even mentioning it. Im a bit new to jquery. correct me if im wrong. sorry – user2707760 Apr 28 '14 at 03:10
`$(document).on("change", "#directoryFilter", function(){ /* Your code goes here..*/ });` – Navneil Naicker Apr 28 '14 at 03:15
thanks, but my question was where are we defining the selector for the corresponding id – user2707760 Apr 28 '14 at 03:17
Please see the update answer, I have written the whole code for you. Hope this helps. – Navneil Naicker Apr 28 '14 at 03:22
use parseInt("selectedId") to compare two integer values..! – SHEKHAR SHETE Apr 28 '14 at 04:23

jquery events not working after dynamically adding elements with ajax call

1 Answers1