Ajax和bootstrap模式

Question

我正在尝试进行ajax调用以删除使用bootstrap模式的用户.模态用于确认目的,如下所示.

<!-- Modal -->
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete user</h3>
</div>
<div class="modal-body">
<p>You are about to delete this user. Are you sure that you want to continue?</p>
</div>
<div class="modal-footer">
<button id="confirm" class="btn btn-primary">Yes</button>
<button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">No, leave</button>
</div>
</div>

然后我使用以下javascript来处理用户输入

    $('a#delete').click(function(e){
        var anchor = this;
        $('#deleteModal').modal('show');
        $('button#confirm').click(function(e){
            $('#deleteModal').modal('hide');
            $.ajax({
                url: $(anchor).attr('href'),
                success:function(result){
                    $(anchor).closest('tr').addClass("error");
                    $(anchor).closest('tr').delay(2000).fadeOut();
              }});
        });
        return false;
    });

用户必须单击的链接是这样的

<a id="delete" href="/admin/edit/user/delete/30" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>

它有效,但我注意到发生了一些奇怪的事情.如果我单击以删除一个用户并选择从模式中取消操作,然后我选择删除另一个确认操作的用户,则会删除这两个用户.

我认为我声明的规则仍然适用于在会话期间单击的对象.有办法避免这种情况吗？

Answer 1

这是因为您注册click活动的方式button#confirm.每次单击删除按钮时,您都会在模式对话框的确认按钮中注册一个新的单击事件处理程序.

这里演示了您的问题.

可以通过将逻辑分成两部分来修复

$('button#confirm').click(function(e){
    $('#deleteModal').modal('hide');
    $.ajax({
        url: $('#deleteModal').attr('href'),
        success:function(result){
            $(anchor).closest('tr').addClass("error");
            $(anchor).closest('tr').delay(2000).fadeOut();
      }});
});

$('a#delete').click(function(e){
    var anchor = this;
    $('#deleteModal').modal('show').attr('href', $(anchor).attr('href'));
    return false;
});

这里我们confirm只在页面加载时注册click事件一次,但是当点击删除按钮时,我们通过user属性将上下文信息传递给确认模式.在确认回调中,我们使用此上下文信息来确定必须删除哪个用户.

你可以在这里的演示中测试它.