jQuery：按钮点击确认
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14907359/
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
jQuery: button click confirmation
提问by Randy Tang
I have the following html and jquery codes for deleting a member account with confirmation. But the code doesn't seem to work: even if I click "cancel" in the pop-up window, the request is still submitted and the account is deleted. How should I correct this? Thanks.
我有以下 html 和 jquery 代码，用于通过确认删除成员帐户。但是代码似乎不起作用：即使我在弹出窗口中单击“取消”，仍然提交请求并删除帐户。我应该如何纠正这个问题？谢谢。
HTML:
HTML：
<button class="member" href="/admin?arg1=deleteMember" onclick="return confirm('Are you sure？')">Delete member</button>
jQuery:
jQuery：
$(document).ready(function() {
$('.member').click(function() {
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
});
回答by Dane Hillard
$(document).ready(function() {
$('.member').click(function() {
if (confirm('Are you sure?')) {
var url = $(this).attr('href');
$('#content').load(url);
}
});
});
Then remove onclick attribute from the HTML element.
然后从 HTML 元素中删除 onclick 属性。
回答by Plynx
You've declared your events in two ways. One uses an inline event handler, and one uses JQuery. They don't react the same way to return false.
您已经通过两种方式声明了您的事件。一种使用内联事件处理程序，一种使用 JQuery。它们对 的反应方式不同return false。
In a JQuery event handler, return falseboth stops the propagation of the event in its tracks andprevents the default behavior the browser would have applied. In a regular inline event handler, it just stops the default behavior. In the case of this button, there is no default behavior to speak of. It's just a button. So it happily returns false if you click "Cancel", then proceeds to run the JQuery event which is next.
在一个JQuery的事件处理程序，return false都停止在其轨道上的情况下的传播和防止浏览器将已应用的默认行为。在常规的内联事件处理程序中，它只是停止默认行为。对于这个按钮，没有默认行为可言。它只是一个按钮。因此，如果您单击“取消”，它会很高兴地返回 false，然后继续运行接下来的 JQuery 事件。
To resolve this issue, it's probably easiest to put all the logic in one place—either JQuery or in the inline event, or have the inline event call a function where you perform all of the logic.
要解决此问题，最简单的方法可能是将所有逻辑放在一个地方 — JQuery 或内联事件中，或者让内联事件调用执行所有逻辑的函数。
For example:
例如：
$(function()
{
$('.member').click(function()
{
var href = $(this).attr('href');
if (/delete/.test(href)) if (!confirm('Are you sure?')) return;
$('#content').load(href);
});
});
回答by Guffa
Returning falsein a click handler for a button(or an input type="button") has no effect, because there is no default behaviour to stop, like with an input type="submit"button or a link.
false在 a button（或 an input type="button"）的点击处理程序中返回没有效果，因为没有要停止的默认行为，例如input type="submit"按钮或链接。
Remove the onclickattribute in the tag, and call confirmin the jQuery click handler:
移除onclick标签中的属性，并confirm在 jQuery 单击处理程序中调用：
$(document).ready(function() {
$('.member').click(function() {
if (window.confirm('Are you sure？')) {
$('#content').load($(this).attr('href'));
}
});
});
回答by edunuke
Ok. I figured it out by my own before looking at any of these valid answer. I am just going to throw mine for anyone to try:
好的。在查看这些有效答案中的任何一个之前，我自己弄清楚了。我只是想把我的扔给任何人尝试：
FIRST THE HTML
首先是 HTML
1st:Suppose this is the button you are presenting to the user:
第一：假设这是您呈现给用户的按钮：
<button id="btn_to_check">Do Something</button>
2nd:Now only if the user clicks the button #btn_to_checkyou present them with a confirmation window with two buttons to confirm their intent (i.e. accept and go back):
第二：现在只有当用户点击按钮时，#btn_to_check你才会向他们展示一个带有两个按钮的确认窗口来确认他们的意图（即接受并返回）：
<div id="btn_confirmation_window" style="display:none">
<button id="accept" value="true">accept</button>
<button id="go_back" value="false">go back</button>
</div>
NOW THE JAVASCRIPT
现在是 JAVASCRIPT
$('#btn_to_check').on('click', function(){
confirmationWindow();
});
function confirmationWindow(){
$('#btn_confirmation_window').fadeIn(); //or show() or css('display','block')
$('#btn_confirmation_window button').on('click', function(){
var confirm= $(this).attr('value');
if (confirm=='true') {
//Code if true e.g. ajax
} else if (confirm=='false'){
//Code if false
}
}
}
Hope it helps!
希望能帮助到你！
回答by toddmo
I found this to be quite simple. It just uses bootstrap and jquery.
我发现这很简单。它只使用引导程序和 jquery。
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
$('#modal').find('.modal-title').text($(this).attr('data-confirm'));
$('#modal-btn-yes').attr('href', href);
$('#modal').modal({show:true});
return false;
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<a href="controllers/my-delete.php?id=5"
class="btn btn-danger"
role="button"
style="width: 100%;"
data-confirm="Are you sure you want to delete?">Delete</a>
<div class="modal fade " id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are You Sure?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
There is no way to undo this action
</div>
<div class="modal-footer">
<a id="modal-btn-yes" class="btn btn-danger" >Yes</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>