7

我正在尝试进行 ajax 调用以删除使用引导模式的用户。模态用于确认目的，如下所示。

<!-- 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>

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

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

4

3 回答 3

8

这是因为您在 上注册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只在页面加载时注册一次点击事件，但是当点击删除按钮时，我们通过user属性将上下文信息传递给确认模式。在确认回调中，我们使用此上下文信息来确定必须删除哪个用户。

您可以在此处的演示中对其进行测试。

于 2013-01-21T12:56:02.663 回答
0

当用户单击链接时，尽管单击了对话框按钮，但仍会提交该链接。您需要防止默认行为：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？

于 2013-01-21T12:35:33.803 回答
0

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

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

或者

$('a#delete').unbind().live('click', function(e) {
于 2014-03-05T21:20:55.100 回答