我在同一页面上有几个表单，我想使用相同的代码向所有表单添加确认对话框。它们都有一个确认表单类，并且确认对话框的标题应该动态生成(这在 atm 中不起作用)。
在 html 中，我有一个对话框，该对话框在页面加载时隐藏，然后在调用 dialog('open') 函数后显示。
这就是我现在所拥有的，它根本不起作用，对话框会加载，但是一旦您按确认，它会多次重复 else 子句并且不提交表单:
var deleteConfirmed = false;
$('form.confirm-form').submit(function(e) {
if ( ! deleteConfirmed)
{
e.preventDefault();
var title = $(this).find('input.action').val();
var $this = $(this);
console.log('title: ' + title);
$('#confirm-dialog').attr('title', title);
$('#confirm-dialog').dialog({
buttons : {
"Confirm" : function() {
deleteConfirmed = true;
$(this).dialog('close');
$this.submit();
},
"Cancel" : function() {
$(this).dialog('close');
}
}
});
$('#confirm-dialog').dialog('open');
}
else
{
$(this).submit();
deleteConfirmed = false;
}
});
最佳答案
编辑
这是一种可能的解决方案。自从我在 jsFiddle 上遇到一些异常行为以来，我已经在实时服务器上对其进行了测试。注意:我废弃了原来的帖子，因为它没有解决多种表单。表单提交很可能会使用 AJAX 提交。
x.html 来源
<!DOCTYPE html>
<html>
<head><title>SO</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
rel="stylesheet"
type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>
<div id="dlg1"></div>
<form method="post" action="/so/x.php" id="frm1" name="frm1">
<input type="text"><br />
<input type="submit" class="submitter_btn" id="frm1_submit">
</form>
<form method="post" action="/so/x.php" id="frm2" name="frm2">
<input type="text"><br />
<input type="submit" class="submitter_btn" id="frm2_submit">
</form>
<form method="post" action="/so/x.php" id="frm3" name="frm3">
<input type="text"><br />
<input type="submit" class="submitter_btn" id="frm3_submit">
</form>
<script type="text/javascript">
var $current = { form : null, do_submit : false };
$('#dlg1').dialog({
title: "Confirmation",
width: 300,
height: 200,
autoOpen: false,
modal: true,
buttons : {
"Confirm" : function(e){
$current.do_submit = true;
$(this).dialog('close');
},
"Cancel" : function(e){
$current.do_submit = false;
$(this).dialog('close');
}
}
});
$('#dlg1').bind('dialogbeforeclose', function(){
if($current.do_submit){
($current.form).submit();
$current.form = null;
$current.do_submit = false;
}
});
$('.submitter_btn').click(function(e){
e.preventDefault();
$current.form = $(this).parents('form:first');
$('#dlg1').dialog('open');
});
</script>
</body>
</html>
x.php 来源
<?php
echo "HELLO";
关于jQuery ui 多种表单上的确认对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3880815/