如何在动态生成的元素

时间:2016-02-10 14:00:17

标签: javascript jquery html events delegates

我有一个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-mainmainbox之间混淆,它们都是同一div元素的类和id。

1 个答案:

答案 0 :(得分:1)

根据您的评论:

  

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

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

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

说明:

  • 不要将bindon混在一起。请改用off
  • 在此示例中,您根本不需要off / unbind
相关问题