Javascript 在动态创建的ID（ID基于父元素）上触发单击事件

我有点困惑，为什么下面的方法不起作用

小提琴

HTML是动态创建的，结果如下：

<div id="manageStatuses">
   <div id="statusRowID_1" class="row">row 1
       <div id="statusRowBtn_1"></div>
   </div>
   <div id="statusRowID_2" class="row">row 2
       <div id="statusRowBtn_2"></div>
   </div>
   <div id="statusRowID_3" class="row">row 3
       <div id="statusRowBtn_3"></div>
   </div>
</div>
<!-- ... etc -->

除了

triggerHandler（）

调用（我想）之外，其他一切都正常

我非常感谢您的指点。

您可以使用

trigger（）

并使用

stopPropagation（）

停止事件传播

//用户单击了状态行
$（“#manageStatuses”）。在（“单击”上，“[id^=“statusRowID”]”函数（）{
var id=$（this.attr（'id'）.split（'uuz'）[1]；
警报（`${id}行已单击`）；
//triggerHandler（）而不是trigger（），否则它将递归地使DOM冒泡
$（`manageStatuses`statusRowBtn`{id}'）。触发器（“单击”）；
});
//处理动态触发的单击状态行。未达到此代码。
$（“#manageStatuses”）。在（“单击”上，“[id^=“statusRowBtn"]”，函数（e）{
var id=$（this.attr（'id'）.split（'uuz'）[1]；
警报（`${id}动态单击的子项`）；
e、 停止传播（）；
//根据ID做其他事情。。。
});

第1行
第2排
第3排
该死！谢谢你，马蒙。但是为什么原始代码不能与triggerHandler（）一起使用呢？我以为这就是重点。。。
// user clicked on a status row
$('#manageStatuses').on("click", '[id^="statusRowID_"]', function () {
    var id = $(this).attr('id').split('_')[1];
    alert(`${id} row clicked`);
    // triggerHandler() instead of trigger() else it will recursively bubble up the DOM
    $(`#manageStatuses #statusRowBtn_${id}`).triggerHandler("click");
});

// handle dynamically triggered click on status child div.  This code is not reached.
$('#manageStatuses').on("click", '[id^="statusRowBtn_"]', function () {
    var id = $(this).attr('id').split('_')[1];
    alert(`${id} child dynamically clicked`);
    // do other things based on ID...
});