twitter-bootstrap Ajax 和引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14438010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax and bootstrap modal
提问by kechapito
I am trying to make an ajax call to delete a user making use of a bootstrap modal. The modal is used for confirmation purposes and it is the following.
我正在尝试进行 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>
Then I am using the following javascript to process the user input
然后我使用以下 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;
});
The link that user has to click is like this
用户必须点击的链接是这样的
<a id="delete" href="/admin/edit/user/delete/30" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>
It works but I noticed that something weird happens. If I click to delete one user and I choose to cancel the action from the modal and then I choose to delete another user confirming the action, both users are deleted.
它有效，但我注意到发生了一些奇怪的事情。如果我单击删除一个用户并选择从模式中取消操作，然后我选择删除另一个用户确认该操作，则两个用户都将被删除。
I think that the rule I have declared still applies in the objects that have been clicked during a session. Is there a way to avoid this?
我认为我声明的规则仍然适用于会话期间单击的对象。有没有办法避免这种情况？
回答by Arun P Johny
It is because of the way in which you are registering the clickevent on button#confirm. Every time you click on the delete button you are registering a new click event handler to the modal dialog's confirm button.
这是因为您在 上注册click事件的方式button#confirm。每次单击删除按钮时，都会向模态对话框的确认按钮注册一个新的单击事件处理程序。
Problem with you approach is demonstrated here.
你的方法有问题在这里演示。
It can be fixed by splitting the logic into two parts
它可以通过将逻辑分成两部分来修复
$('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;
});
Here we registers the confirmclick event only once at the page loading, but when the delete button is clicked we pass a context information to the confirmation modal via the userattribute. In the confirm callback we use this context information to determine which user has to be deleted.
这里我们confirm只在页面加载时注册一次点击事件，但是当删除按钮被点击时，我们通过user属性将上下文信息传递给确认模式。在确认回调中，我们使用此上下文信息来确定必须删除哪个用户。
You can test it in the demo here.
回答by AlecTMH
When a user clicks a link it's submitted despite of the dialog button clicked. You need to prevent the default behavior: e.preventDefault();
当用户单击链接时，尽管单击了对话框按钮，但仍会提交该链接。您需要阻止默认行为：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;
});
A different way to do this is not to put the href value to the links. You already have user attribute so it's some kind of duplication:
执行此操作的另一种方法是不将 href 值放入链接。您已经拥有用户属性，因此它是某种重复：
<a id="delete" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>
and js:
和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;
});
Do you use the same deleteid for all delete links?
您是否delete对所有删除链接使用相同的ID？
回答by Jimubao
unbind your click event with .unbind() or do .one() to you click event make sure it only excute once.
使用 .unbind() 取消绑定您的点击事件或对您的点击事件执行 .one() 确保它只执行一次。
$('a#delete').one('click', function(e) {
or
或者
$('a#delete').unbind().live('click', function(e) {
