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事件的方式。每次单击删除按钮时，您都会在模式对话框的确认按钮中注册一个新的单击事件处理程序。

问题是demonstrated here。

可以通过将逻辑分成两部分来解决这个问题

$('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点击事件一次，但是当点击删除按钮时，我们会通过user属性将上下文信息传递给确认模式。在确认回调中，我们使用此上下文信息来确定必须删除哪个用户。

您可以在demo here。

中对其进行测试

Answer 2

当用户点击链接时，尽管单击了对话框按钮，但仍然提交了该链接。您需要阻止默认行为：e.preventDefault();

  $('a#delete').click(function(e){
    e.preventDefault();
    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;
});

执行此操作的另一种方法是不将href值放入链接。您已经拥有用户属性，因此它是某种重复：

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

和js：

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

您是否对所有删除链接使用相同的delete ID？

Answer 3

使用.unbind（）取消绑定您的点击事件，或者对您执行.one（）点击事件，确保它只执行一次。

$('a#delete').one('click', function(e) {

或

$('a#delete').unbind().live('click', function(e) {

Ajax和bootstrap模式

3 个答案: