jquery - Ajax 请求不适用于数据表分页

Question

在我的 Laravel Web 应用程序中，我使用 datatable 来显示数据。我的表格有 3 个操作:查看、编辑 和删除。对于编辑和查看，我使用 Bootstrap 4 模式。

这是数据表的 View ..

这是我要在模态上编辑的ajax请求代码:

$.ajax({
      type:'GET',
      url:"{{route('user.edit')}}",
      data:{'id':user_id},
      success:function(data){
        var role;
        if(data.role_id == 1){
            role = 'Admin';
        }else if(data.role_id == 2){
            role = 'Seller';
        }else{
            role = 'Publisher';
        }
        $(header).empty();
        $(header).append('<h3>'+data.details.name+'\'s details</h3>');
        $('#name').empty();
        $('#name').val(data.details.name);
        $('#email').empty();
        $('#email').val(data.details.email);
        $('#contact').empty();
        $('#contact').val(data.details.contact);
        $('#address').empty();
        $('#address').val(data.details.address);
        $('#user_id').empty();
        $('#user_id').val(data.details.id);
        $.each(data.roles, function(index,val){
            if(data.details.role_id == val.id)
                var selected = 'selected';
            $('#role').append('<option '+selected+' value="'+val.id+'">'+val.role_name+'</option>');

        });
    }
});

现在第一页一切正常。但是，当我在 datatable 中搜索某些内容或通过分页转到另一个页面时，我的 ajax 请求不起作用。我正在使用类来调用ajax请求。当我转到另一个页面或搜索数据并单击编辑时，只有模式打开，ajax 请求不会启动，并且显示空模式。我该如何解决这个问题？

Answer 1

$(document).on('click', '.your_button', function(){
   //code for action
});

事件处理程序仅处理代码执行时存在于 dom 中的那些元素，因此需要使用基于委托(delegate)的事件处理程序。试试这个