如何将jquery事件绑定到动态添加的多个DOM元素？

我在按钮

单击
上动态创建多个DOM元素

我使用jquery
.on（）
方法将“图像裁剪插件”绑定到动态添加的DOM元素，但它只适用于第一个DOM元素，不适用于第二个、第三个DOM元素。
单击第一个DOM时，对话框将打开以选择图像，但不选择第二个DOM元素，如图所示

$("#add-button").on('click', function() {
  $('#gallery-div').append('<div class="col-md-4"><a href="javascript:void(0);" class="gallery-remove">&times;</a><label class="upload_testi remove"><span>Choose file</span><input id="gallery-img" class="crop-dynamic-cls" type="hidden" name="test[image]"></label></div>');

  $(document).on("click", "a.gallery-remove", function() {
    $(this).parent().remove();
  });

  $(document).on('click', '#gallery-div', function() {
    $(this).find('label').each(function() {
      $('.crop-dynamic-cls').awesomeCropper({
        width: 1020,
        height: 434,
        debug: true
      });
    })
  })
})

$（“#添加按钮”）。在（'click'，function（）上{
$（'#gallery div'）。追加（'Choose file'）；
$（文档）。在（“单击”，“a.gallery-remove”，函数（）上{
$（this.parent（）.remove（）；
});
$（文档）。在（'click'，'#gallery div'，函数（）上{
$（this）.find（'label'）.each（function（）{
$（'.crop dynamic cls'）.awesomecroper({
宽度：1020，
身高：434，
调试：正确
});
})
})
})
尝试类似的操作，同时检查我是否已将选择器更改为.gallery-remove，而不是.gallery-remove

$(document).ready(function() {

  // first register your handler for all future added elements to the DOM

  $(document).on("click", ".gallery-remove", function() {
    console.log('remove the parent');
  });

  // Then register the handler that will add stuff to the DOM
  $("#add-button").on('click', function() {
      $('#gallery-div').append('<div class="col-md-4"><a href="javascript:void(0);" class="gallery-remove">&times;</a><label class="upload_testi remove"><span>Choose file</span><input id="gallery-img' + i + '" class="crop-dynamic-cls" type="hidden" name="test[image]"></label></div>');
  // do other stuff here
  });
});

$（文档）.ready（函数（）{
//首先为将来添加到DOM中的所有元素注册处理程序
$（文档）。在（“单击“，”.gallery remove”，函数（）上{
log（'remove the parent'）；
});
//然后注册将向DOM添加内容的处理程序
$（“#添加按钮”）。在（'单击'，函数（）上{
$（'#gallery div'）。追加（'Choose file'）；
//在这里做其他事情
});
});
将其他单击事件移出
$（“#添加按钮”）
单击它正在工作。。。我只需从
#添加按钮
单击事件中删除
+I+
。您有两个事件委派定义-您指的是这一个
$（文档）。on（'click'、'#gallery div'、
？这只适用于第一个DOM元素，因为ID必须是唯一的，所以使用
#
总是只能找到第一个。@Roy OPs代码不完整，
i
似乎与它无关，不适用于OP：在另一个ev中绑定事件处理程序几乎总是错误的ent处理程序。每次单击，都会向先前创建的所有元素添加一个额外的处理程序。