Question

我正在使用datatable 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>

上面的代码在我第一次分页时完美无缺，但在第二页时根本没有调用。

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

Answer 1

Bind on event将有效..

BASH_REMATCH

Answer 2

我通过改变

解决了这个问题

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

使用以下代码

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

Answer 3

绑定事件时，还应该选择表，例如：

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

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

event.preventDefault();

// Put here your rest logic

});

Answer 4

这不是调用因为，您正在从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()

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

4 个答案: