Can't delete data after 10 entries in AJAX, JQuery and javascript/php-CodePudding

I have 10 rows with data inserted and I'm able to delete any of those, but after I insert from 11th row onwards I can't delete any of the rows after the 10th.

EDIT (I CAN'T DELETE ANYTHING WHEN THE RESPONSIVE FORM IS SHOWING)

            $(document).ready(function(){
                $('#list').dataTable({
                    responsive: true
                });
            $('.delete_piece').click(function(){
            _conf("Are you sure to delete this piece?","delete_piece",[$(this).attr('data-id')])
            })
            })
            function delete_piece($id){
                start_load()
                $.ajax({
                    url:'ajax.php?action=delete_piece',
                    method:'POST',
                    data:{id:$id},
                    success:function(resp){
                        if(resp==1){
                            alert_toast("Data successfully deleted",'success')
                            setTimeout(function(){
                                location.reload()
                            },1500)
                        }
                    }
                })
            }

DELETE FUNCTION AJAX

if($action == "delete_piece"){
$delsete = $crud->delete_piece();
if($delsete)
    echo $delsete;
}

DELETE FUNCTION FOR THE ADMIN (ME)

    function delete_piece(){
     extract($_POST);
     $delete = $this->db->query("DELETE FROM mro_inventory where id = ".$id);
     if($delete){
        return 1;
     }
   }

CodePudding user response：

Consider the following.

$(function() {
  function delete_piece($id) {
    start_load()
    $.ajax({
      url: 'ajax.php?action=delete_piece',
      method: 'POST',
      data: {
        id: $id
      },
      success: function(resp) {
        if (resp == 1) {
          alert_toast("Data successfully deleted", 'success')
          setTimeout(function() {
            location.reload()
          }, 1500);
        }
      }
    });
  }

  $('#list').dataTable({
    responsive: true
  });
  
  $('tbody').on("click", ".delete_piece", function(e) {
    _conf("Are you sure to delete this piece?", "delete_piece", [$(this).attr('data-id')])
  });
});

This uses the .on() method to delegate the click event to a class.

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers.

See more: https://api.jquery.com/on/

It was not clear from your post what the HTML structure looks like; yet, you are using DataTables, so I know there should be a Table Body element that should be present.