javascript - 元素未检测到单击事件

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 8 年前。

我通过 JavaScript 动态生成 HTML，并在表格单元格内包含 2 个字形。铅笔字形响应正确，但我的删除代码没有正确响应，我不确定为什么。

这是渲染的 HTML

<span id="edit-dp" class="glyphicon glyphicon-pencil" data-action-url="/Settings/GetDatapoint" data-id="3"></span>
<span id="delete-dp" class="glyphicon glyphicon-trash" data-id="3"></span>

这是我的 javascript 代码，用于将事件与元素联系起来。

$(document).ready(function(){
  $('#delete-dp').click(function (event) {
      alert('pressed');
      //add the datapoint ID to the array to be serialised to JSON and then stored in a html hidden field
      deletedDatapoints.push($(this).data('id'));
  });
})

Answer 1

使用.on()。

$(document).ready(function(){
    $(document).on('click', '#delete-dp', function (event) {
        alert('pressed');
        //add the datapoint ID to the array to be serialised to JSON and then stored in a html hidden field
        deletedDatapoints.push($(this).data('id'));
    });
});

您可以将其范围限制为最接近的非动态生成的父级，这样比 document 更高效。