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

Question

I am using datatable jquery for my records fetched from database and i wanted to perform edit and delete event for each records.

The datatable is paginated and I am facing problem with delete function.

For the delete function on first page It gets sucesfully executed as shown in the image below

This is my second pagination page and it does not even call the function

This is my html code

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

This is my javascript code

<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>

The above code works perfectly when I am on the first pagination but does not at all called when on the second page.

More creepy is, it does not even show any error in console. I am stuck.

Answer 1

Bind on event will work..

<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;
     });
     });

Answer 2

I solved it with changing

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

Use This code below

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

Answer 3

You should select table also while binding an event, For example:

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

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

event.preventDefault();

// Put here your rest logic

});

Answer 4

This is not calling because, you are loading content from AJAX.

And events (update, delete) are only bound to initially loaded content.

So, basically, events are not binding.

You need to modify your function so that events get bound even for dynamically loaded content.

jQuery .on() is such method which will bind events to your dynamically loaded content also.

Modified code:

<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()