Jquery加载特定的div使按钮不起作用答案

【问题标题】：Jquery Load specific div make button not workJquery加载特定的div使按钮不起作用
【发布时间】：2015-04-09 11:42:22
【问题描述】：

在 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 变得无法使用，但编辑按钮正在工作）。

【问题讨论】：

标签： javascript php jquery ajax laravel-5

【解决方案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;
    }
});

【讨论】：

【解决方案2】：

问题在于 jQuery 的 .load 方法将添加新的 html，这将覆盖之前添加的任何事件处理程序，您将需要重新添加按钮的事件处理程序（以防它被.load) 以便继续可重复使用。

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

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

【讨论】：

耶！感谢您的建议，下次继续使用。