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

Answer 2

问题是jQuery的.load方法会添加新的html，这将覆盖之前添加的任何事件处理程序，你需要为按钮重新添加事件处理程序（如果是被.load覆盖，以便继续可重复使用。

另一种方法是在父元素和委托上添加事件处理程序（用于按钮）（通过jQuery.on method with selector）

希望这会有所帮助，如果需要，可以评论更多信息

Jquery加载特定的div make按钮不起作用

2 个答案: