Datatable Jquery第二页记录删除事件不起作用答案

【问题标题】：Datatable Jquery second page record delete event does not workDatatable Jquery第二页记录删除事件不起作用
【发布时间】：2017-03-20 08:50:30
【问题描述】：

我正在对从数据库中获取的记录使用数据表 jquery，并且我想为每条记录执行编辑和删除事件。

数据表是分页的，我遇到了删除功能的问题。

第一页的删除功能如下图所示成功执行

这是我的第二个分页页面，它甚至没有调用函数

这是我的html代码

<a class="supp_delete_link" id="<?php echo $user->ID; ?>">
              <i class="link black remove icon"></i>
            </a></td>

这是我的 JavaScript 代码

<script type="text/javascript">
         $(function(){
           $(".supp_delete_link").click(function(){
             debugger;
             var element = $(this);
             var del_id = element.attr("id");
             console.log(del_id);
             var info = del_id;
         if(confirm("Are you sure you want to delete this?"))
         {
          $.ajax({
            type: "GET",
            url: "supplierdelete"+'/'+info,
            data: info,
            success: function(){
          }
         });
           $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
           .animate({ opacity: "hide" }, "slow");
          }
         return false;
         });
         });
</script>

当我在第一页时，上面的代码可以完美运行，但在第二页时根本没有调用。

更令人毛骨悚然的是，它甚至没有在控制台中显示任何错误。我被卡住了。

【问题讨论】：

我刚刚遇到了同样的情况，谢谢你的问题，这与我目前遇到的情况完全相同，回复也解决了我的问题，但仍然不清楚是什么原因造成的第二页分页，如果 DataTable 用于呈现表格，则使 javascript 编辑/删除无响应...

标签： javascript php jquery datatable pagination

【解决方案1】：

这不是调用，因为您正在从 AJAX 加载内容。

并且事件（更新、删除）只绑定到最初加载的内容。

所以，基本上，事件不具有约束力。

您需要修改您的函数，以便即使对于动态加载的内容也能绑定事件。

jQuery .on() 就是这样一种方法，它也可以将事件绑定到您的动态加载的内容。

修改后的代码：

<script type="text/javascript">
         $(function(){
           $(".supp_delete_link").on('click', function(){
             debugger;
             var element = $(this);
             var del_id = element.attr("id");
             console.log(del_id);
             var info = del_id;
         if(confirm("Are you sure you want to delete this?"))
         {
          $.ajax({
            type: "GET",
            url: "supplierdelete"+'/'+info,
            data: info,
            success: function(){
          }
         });
           $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
           .animate({ opacity: "hide" }, "slow");
          }
         return false;
         });
         });
</script>

jQuery API .on()

【讨论】：

【解决方案2】：

绑定事件将起作用..

<script type="text/javascript">
     $(function(){
       $(document).on("click",".supp_delete_link",function(){//change this line on event bind
         debugger;
         var element = $(this);
         var del_id = element.attr("id");
         console.log(del_id);
         var info = del_id;
     if(confirm("Are you sure you want to delete this?"))
     {
      $.ajax({
        type: "GET",
        url: "supplierdelete"+'/'+info,
        data: info,
        success: function(){
      }
     });
       $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
       .animate({ opacity: "hide" }, "slow");
      }
     return false;
     });
     });

【讨论】：

感谢@Shabbir Ahmed，您的回复让我很开心，我刚刚遇到了同样的问题。再次感谢您解决此问题。

【解决方案3】：

我通过改变解决了它

$(function(){
       $(".supp_delete_link").click(function(){.....});

在下面使用此代码

$(document).on('click', '.supp_delete_link', function(e){
e.preventDefault();......});

【讨论】：

【解决方案4】：

在绑定事件时也应该选择表格，例如：

let my_table = $('#tableID').DataTable();

$('#tableID').on('click', ".supp_delete_link", function(event){

event.preventDefault();

// Put here your rest logic

});

【讨论】：