Question

我想要创建一个用于删除确认的Jquery一致性对话框。问题是，当我执行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>

Answer 1

confirm()的（唯一？）优势是同步发生，在您选择答案之前不会继续其他代码。这允许您从单击处理程序返回结果，以确定是否应继续单击。

显示对话框的任何自定义方法都需要代码继续，否则对话框将不会呈现。这意味着与对话框的所有交互都必须是异步的。你需要在很多帧之后回答是/否答案。

一种解决方案：

停止点击事件继续进行（除非存在某个属性）
打开对话框
得到是/否回答
如果答案为是，请在元素上设置一个标记以允许点击正常进行，然后在原始元素上模拟点击事件。

现在jQuery Dialog不支持开箱即用，但写起来并不难。

工作示例： 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/

如何将简单的javascript确认更改为Jquery对话框确认何时删除？

1 个答案:

一种解决方案：

说明：