javascript - Jquery加载特定div使按钮不起作用

Question

成功使用ajax并加载div后出现问题。代码如下:

 <script>

$('.delete').click(function(e){
    e.preventDefault();

    var id = $(this).attr('id');
    if (confirm('Delete this user?') == true) {
        $.ajax({
            type: "POST",
            data: {_method: "DELETE"},
            url: 'manage-staff-roles/' + id, //resource
            beforeSend: function(){
                $('.loader-wrap').removeClass('hiding hide');
            },
            success: function() {
                $('.loader-wrap').addClass('hiding hide');
                $('#table').load(location.href + " #table");
                Messenger().post({
                    message: 'Success.',
                    type: 'success',
                    showCloseButton: true
                });

            }

        });
    }
    else
    {
        return;
    }
});

</script>

<小时/>

这是我的 html:

       <div id="table">
          @foreach($staffroles as $staffrole)

                            {{ $staffrole->id }}

                            {{ $staffrole->name }}

                            <a class="edit" id="staffroles/{{ $staffrole->id }}/edit" href="manage-staff-roles/{{ $staffrole->id }}/edit">
                                Edit </a>
                            |
                            <a class="delete btn" id="{{ $staffrole->id }}" >
                                Delete </a>

                @endforeach
                </div>

ajax成功后并完美执行所有功能(包括重新加载特定div)。但问题是我的包含删除按钮的 div 变得不可用，但编辑按钮正在工作)。

Answer 1

您需要使用.on()为动态创建的按钮添加点击处理程序。修改您的删除按钮点击处理程序，如下所示

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

    var id = $(this).attr('id');
    if (confirm('Delete this user?') == true) {
        $.ajax({
            type: "POST",
            data: {_method: "DELETE"},
            url: 'manage-staff-roles/' + id, //resource
            beforeSend: function(){
                $('.loader-wrap').removeClass('hiding hide');
            },
            success: function() {
                $('.loader-wrap').addClass('hiding hide');
                $('#table').load(location.href + " #table");
                Messenger().post({
                    message: 'Success.',
                    type: 'success',
                    showCloseButton: true
                });

            }

        });
    }
    else
    {
        return;
    }
});