我将创建一个Jquery conform对话框以进行删除确认。问题是，当我做Jquery的事情时，它不起作用。我将发布javascript确认框，以便了解如何将其更改为Jquery对话框确认。
//for delete confirm box
var del = function($element) {
$('.remove').dialog({
title: 'Delete',
resizable: true,
modal: true,
hide: 'fade',
width: 350,
height: 275,
buttons: {
"Delete item": function() {
$(this).dialog("close");
$element.data('allow', true); // Allow the next click to proceed
$element[0].click(); // Hit the DOM native click event
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
$('.delete').click(function(e) {
if (!$(this).data('allow')) {
e.stopImmediatePropagation();
del($(this));
}
});
$('.delete').click(function() {
$(this).closest('.delete').hide();
});
PHP代码：
<tr align='center'>
<td><font color='black'><?php echo $test['BookID'];?></font></td>
<td><font color='black'><?php echo $test['Title'];?></font></td>
<td><font color='black'><?php echo $test['Author'];?></font></td>
<td><font color='black'><?php echo $test['PublisherName'];?></font></td>
<td><font color='black'><?php echo $test['CopyrightYear'];?></font></td>
<td><a class="edit" href='view.php?BookID=<?php echo $test['BookID'];?>' title="Edit">Edit</a>
<div id="register" ></div>
<td><a class="delete" href ='del.php?BookID=<?php echo $test['BookID'];?>' title="Delete"><center>Delete</center></a> <!----for deleleting ---->
<div id="remove" ></div>
</tr>
confirm()的（唯一？）优点是同步发生，在选择答案之前不会继续执行其他代码。这允许您返回单击处理程序的结果，以决定是否应该继续单击。
任何显示对话框的自定义方法都需要代码继续，否则对话框将不会呈现。这意味着所有与对话框的交互都必须是异步的。您需要在许多帧之后对"是/否"答案作出响应。
一种解决方案：
- 停止单击事件继续进行（除非存在特定属性）
- 打开对话框
- 得到肯定/否定的回答
- 如果答案是肯定的，请在元素上设置一个标志，以允许单击正常进行，然后在原始元素上模拟单击事件
现在jQueryDialog不支持开箱即用，但编写起来并不困难。
工作示例：https://jsfiddle.net/TrueBlueAussie/f9u500zr/
$('.del').click(function(e) {
if (!$(this).data('allow')) {
e.stopImmediatePropagation();
del($(this));
}
});
在对话框设置中，我设置了标志并再次点击按钮：
buttons: {
"Delete item": function() {
$(this).dialog("close");
$element.data('allow', true); // Allow the next click to proceed
$element[0].click(); // Hit the DOM native click event
},
注意事项：
- 我只需在按钮上存储一个
allow数据标志，让我知道应该允许下一次单击继续 - 由于本例使用单击处理程序进行删除和提示，因此我使用
stopImmediatePropagation来停止命令处理。对于要使用e.preventdefault()的链接或表单 - 为了使
stopImmediatePropagation在本例中工作，事件的注册顺序非常重要。如果在我的示例结束时颠倒两个事件处理程序的顺序，您将看到项目被删除，然后出现对话框！例如。https://jsfiddle.net/TrueBlueAussie/f9u500zr/1/