Javascript jquery动态创建的元素不触发onchange

我一直在研究jquery中的.on（）函数，以更新动态表单的DOM，并在更改新创建的下拉框时触发事件

我在这里链接了一把小提琴：

我认为引起我问题的jquery是：

$('#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+'"');  
    });
});

代码将在初始行激发，但不会在新创建的行激发。同样，根据我读到的所有内容，我需要通过.on（）方法重新加载/重新定义DOM以包含新元素。我在正确的轨道上吗？如果是，我错过了什么

---

如果您能提供任何相关指导，我们将不胜感激。

请尝试以下内容

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

• 如果您的jQuery版本为1.7，则可以使用

  delegate（）

• 对于1.7+版本，像这样使用

  $（'parent_selector'）。on（'event'，'event_selector'，function（）{}）

$（'parent_selector'）。在（'change'，'event_selector'，function（）{}）上

$（'#orderDetail'）.ready（function（）{

也是错误的。正如dupe所说：

$（'#orderDetail'）.on（'change'，“[id^=PN#]”，function（）{console.log（this.value）；}）