刪除時如何將簡單的JavaScript確認更改為Jquery對話框確認？

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/