Datatables.net 和 sweetalert

Question

所以我使用 Datatables ，每行末尾都有一个删除按钮，我将其与 Sweetalert。

我每页有 10 个结果，如果有更多页面，我转到下一页并尝试使用删除按钮，但什么也没有发生。就像除了前 10 行之外的任何其他内容都没有渲染 sweetalert 一样。

下面是我的 Sweetalert 代码，尽管我不认为它与此代码相关，因为它对于前 10 行工作正常。

<script>
    $(document).ready(function () {
        $('.deleteItem').on('click', function (e) {
            e.preventDefault();
            var form = $(this).parents('form');
            Swal.fire({
                title: 'Some title',
                text: "Some text",
            }).then((result) => {
                if (result.value) {    
                    form.submit();
                }
            });
        });
    });
</script>

我只是想知道使用 Datatables 的其他人是否遇到过类似的问题，或者是否有人知道问题可能是什么。就像页面上只呈现前 10 行一样。

我初始化数据表的方式如下所示，所以没什么花哨的：

$(document).ready(function () {
    $('.datatable').dataTable();
});

我所有的删除按钮看起来都是这样的：

<form method="POST" action="something">
    <a type="submit" class="deleteItem">
        Delete
    </a>
</form>

Answer 1

正如您所指出的，其他删除锚点不在其他页面的 DOM 中。您可以侦听 DataTables 触发的 draw 事件并分配单击此处使用 Sweetalert 的处理程序。我定义了一个函数 registerDeleteItemHandlers 来封装单击事件处理程序的注册。

$(document).ready(function () {
  const registerDeleteItemHandlers = () => {
    $(".deleteItem").on("click", function (e) {
      e.preventDefault();
      var form = $(this).parents("form");
      Swal.fire({
        title: "Some title",
        text: "Some text",
      }).then((result) => {
        if (result.value) {
          form.submit();
        }
      });
    });
  };

  registerDeleteItemHandlers();

  $(".datatable")
    .dataTable()
    .on("draw.dt", function () {
      registerDeleteItemHandlers();
    });
});