0

I have been researching the .on() function within jquery to update the DOM of a dynamic form and trigger an event onchange of a newly created dropdown box.

I've linked a fiddle here:
http://jsfiddle.net/6y18mho8/10/

the jquery I believe is causing my problem is here:

$('#orderDetail').ready(function () {
    $("[id^=PN_]").on('change',function(event) {
        var PN = $(event.target).val();
        var ID = event.target.id;
        alert('Successfully triggered by onChange from "'+ID+'"');  
    });
});

The code will fire on the initial row but not on newly created. Again, from everything I've read I need to reload/redefine the DOM to include my new elements via the .on() method. Am I on the right track and if so what am I missing?

Any guidance on this would be much appreciated.

user1459766
  • 118
  • 2
  • 3
  • 16
  • `$('parent_selector').on('change', 'event_selector', function(){});` – MH2K9 Aug 29 '14 at 18:08
  • `$('#orderDetail').ready(function () {` is also wrong. As the dupe says: `$('#orderDetail').on('change',"[id^=PN_]", function(){ console.log(this.value); });` – epascarello Aug 29 '14 at 18:09

1 Answers1

0

Try something like below! 

$(".orderDetail").on('change', '[id^=PN_]', function(event) {
    var PN = $(event.target).val();
    var ID = event.target.id;
    alert('Successfully triggered by onChange from "'+ID+'"');
});
  • If your jQuery version 1.7 then can use delegate()
  • For 1.7+ use .on like this $('parent_selector').on('event', 'event_selector', function(){});
MH2K9
  • 11,951
  • 7
  • 32
  • 49