如何在动态生成的元素上实现手动点击事件答案

【问题标题】：How to implement manual click event on dynamically generated element如何在动态生成的元素上实现手动点击事件
【发布时间】：2016-02-10 14:00:17
【问题描述】：

我有一个mainbox，里面有一些动态生成的盒子。

// first time retrive
$.post("dataretrive.php", {
    }, function(data, status) {
        document.getElementById('mainbox').innerHTML = data;
        timer();
    });

然后点击这些子框，我正在实现一些功能

$('.boxes-main').unbind('click').on('click', '.subbox', function(e){
    var value1 = $(this).attr('data');
    var value2 = $(this).attr('data2');
    var value3 = $(this).attr('data3');
    var value11 = $(this).attr('data4');
    var value12 = $(this).attr('data5');
    var value13 = $(this).attr('data6');
...... // some more functionality with these data which i think doesn't matter for this question for this question
    });

因为我想实现这些subbox 的快捷方式，比如当用户按下 1 时，它会触发该框上的点击事件。我也有与此相关的 ID。比如box1 , box2, box3等等。我正在尝试在按下键 1 时放置该框的单击事件。

$(document).keypress(function(e) {
  if(e.charCode == 49) {
$('#box1').click();
  }
});

我也尝试过 trigger 函数，$("boxes-main #box1').click(); 但没有任何效果，因为内容是动态生成的。有人告诉我如何在动态生成的元素上实现手动点击事件。

不要混淆boxes-main 和mainbox 都是同一个div 元素的class 和id。

【问题讨论】：

请展示动态生成元素的 HTML 示例。如果您可以选择它，您可以使用.click() 触发点击。如果由于其他问题而无法选择它，则可能是问题所在。
另请注意：您应该使用off 和on 以保持一致性（而不是unbind）。它可能有效，但让读者感到困惑:)
根据您的评论，您使用委托的事件处理程序定位了错误的元素。在下面添加说明。

标签： javascript jquery html events delegates

【解决方案1】：

根据您的评论：

不要混淆 box-main 和 mainbox 两者都是类和相同 div 元素的 id。

不是点击生成被破坏，而是您在委派的click 事件处理程序中定位了错误的祖先。向更高的祖先上升到一个不变的元素。 document 是最好的默认值，如果没有其他更接近的话。

$(document).on('click', '.subbox', function(e){

注意事项：

不要将bind 与on 混用。请改用off
在这个例子中你根本不需要off/unbind

【讨论】：