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

Question

I'm a bit stumped as to why the following is not working.

Fiddle here .

The HTML is dynamically created, resulting in something like this:

<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 -->

jQuery/Javascript to handle the user clicking on the row. When they do, I'd like to trigger a click on the corresponding child div.

// 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...
});

Everything works except the triggerHandler() call (I think).

I'd appreciate any pointers.

Answer 1

You can use trigger() and stop the event propagation using stopPropagation() .

 // 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}`).trigger("click"); }); // handle dynamically triggered click on status row. This code is not reached. $('#manageStatuses').on("click", '[id^="statusRowBtn_"]', function (e) { var id = $(this).attr('id').split('_')[1]; alert(`${id} child dynamically clicked`); e.stopPropagation(); // do other things based on ID... });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>