如何在動態生成的元素上實現手動單擊事件

Question

我有一個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時，它會觸發該框上的click事件。 我也有與此相關的ID。 如box1 , box2, box3等。 我試圖在按下鍵1時放置該框的click事件。

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

我也嘗試過trigger函數$("boxes-main #box1').click();但由於內容是動態生成的，因此無法正常工作。有人告訴我如何在動態生成的元素上實現手動click事件。

並且不要在boxes-main和mainbox之間混淆，它們都是同一個div元素的類和id。

Answer 1

根據您的評論：

並且不要在box-main和mainbox之間混淆，它們都是同一個div元素的類和id。

並不是單擊生成中斷了，而是您在委派的click事件處理程序中定位了錯誤的祖先。 將祖先上移至不變的元素。 如果沒有其他更接近的地方， document是最好的默認值。

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

筆記：

• 不要on混合使用bind 。 使用off ，而不是
• 在此示例中，您根本不需要off / unbind