Question

我有一个确认框，当单击删除按钮时，会显示确认警报，

函数

<script type="text/javascript">
    $('.confirm').on('click', function () {
        return confirm('Are you sure you want to delete ?');
    });
</script>

每当我为任何html元素添加一个类时，它都运行良好，直到我将其添加到此函数中，该类才停止工作

$(document).ready(function() {
  $('#list').dataTable({
    "ajax":{
          url :"list.php",
          type: "GET",
          error: function(){
            $("#post_list_processing").css("display","none");
          }
        },
        "columns": [
              { "data": "title" },
              { "data": "description" },
              {
                "data": function(item) {
                  return '<a class="confirm" href="delete.php?id=' + item.id + '">delete</i></a>';
                }
              }
          ]
  });
});

Answer 1

好像您在这里有计时问题。

调用$('.confirm').on('click', function () { /* ... */});时，会将单击处理程序附加到当前在DOM中的所有带有“ confirm”类的元素。

稍后再使用“ confirm”类添加另一个元素时，将不会为该新元素注册处理程序。

解决方案是在将新元素添加到DOM后，重新注册点击处理程序：

$('.confirm').off('click'); // remove old handlers
$('.confirm').on('click', function () { /* ... */}); // register handlers again for all current elements

Answer 2

问题似乎是当您进行事件绑定时.confirm按钮尚未准备好。请尝试以下方法：

$('body').on('click', '.confirm', function () {
  return confirm('Are you sure you want to delete ?');
});

这里发生的变化是，我们实际上将click事件绑定到了主体，该主体已经可用，但是随后过滤了回调以仅在实际的click-target是“ .confirm”元素时执行。

Answer 3

jQuery在运行时绑定事件侦听器。如果确认元素不在页面上，则不会绑定任何元素。

要避免这种竞争情况，请将事件绑定到最接近动态生成数据的静态元素。

$(‘#list’).on(‘click’, ‘.confirm’, function(){
  ...
})

虽然您可以将事件绑定到文档或body元素，但是有两个原因会使您使处理程序更靠近受影响的数据：

在事件的冒泡/传播过程中，性能最低的原因和被事物拦截的机会较小
在浏览器的开发人员窗口中检查元素时，有时可以更直观地查看事件。可以快速快照并更好地了解页面中可能发生的情况，这有助于调试

在另一个函数内的js中使用确认警报框

3 个答案: