Datatable Jquery second page record delete event does not work

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