試圖用JavaScript，JQuery制作確認框……不起作用

Question

我是JQuery和JS的新手，所以這可能是我所缺少的基本知識。 在我的HTML中，我有一個表格：

<form  action="" method="post" onsubmit="return confirm_del()">
     //….etc…..
    <button type="submit" class="btn btn-sm btn-danger">Delete</button>
</form>

我想對刪除按鈕進行確認。 因此，我有以下內容，即為確認框的文本：

<div id='confirmation_dialogue'>
Pressing 'Delete' will delete this item from the database. This action cannot be undone <br><br>
Pressing Cancel will not change the database.
</div>

在此之下，為了處理onSubmit函數，我需要執行以下操作：

<script type="text/javascript">

function confirm_del(){
    alert("cd");
    $("#confirmation_dialogue").dialog({
        autoOpen : false,
        modal : true,
        title : "<div class='widget-header'><h4><i class='icon-ok'></i> Delete Item </h4>      </div>",
        buttons : [{
            html : "Cancel",
            "class" : "btn btn-default",
            click : function() {
                $(this).dialog("close");
                return false;
            }
        }, {
            html : "Delete",
            "class" : "dialog btn btn-info",
            click : function() {
                $(this).dialog("close");
                return true;
            }
        }]

    });
}
//…..and so on, until the </script>

發生的情況是確認框的文本出現在屏幕的底部，就像沒有JQ函數來解決它一樣。 但是，如果我從Confirm_del（）函數中取出JQ，似乎無法獲得Confirm_del來成功調用它。 即使現在，在函數中使用它，它似乎仍然被忽略了-不會出現確認框，並且會發生刪除。

Answer 1

嘗試將一個e參數添加到confirm_del（）函數，並在第一行中放置一個e.preventDefault（）。 像這樣：

function confirm_del(e) {
e.preventDefault();
alert("cd");
$("#confirmation_dialogue").dialog({
    autoOpen : false,
    modal : true,
    title : "<div class='widget-header'><h4><i class='icon-ok'></i> Delete Item </h4>      </div>",
    buttons : [{
        html : "Cancel",
        "class" : "btn btn-default",
        click : function() {
            $(this).dialog("close");
            return false;
        }
    }, {
        html : "Delete",
        "class" : "dialog btn btn-info",
        click : function() {
            $(this).dialog("close");
            return true;
        }
    }]

});
}

您還需要有一個從click函數調用的隱藏提交，因為返回true / false會返回到click函數而不是父函數。 參見這篇文章，了解如何實現： jQuery對話框按鈕返回值

Answer 2

演示

我不建議使用內聯JS ； 這只是不好的做法。 另外，由於其他人可能會更好地解釋，從dialog按鈕單擊處理程序return true和return false不能像您期望的那樣工作...執行中出現中斷，不允許它們為true/false作為函數的返回值。 干凈地將標記和JS分開，如下所示：

的HTML

<form id="del_form"  action="" method="post"> <!-- <<<<<<<== -->
    <button type="submit" class="btn btn-sm btn-danger">Delete</button>
</form>

<div id='confirmation_dialogue'>
Pressing 'Delete' will delete this item from the database. This action cannot be undone <br><br>
Pressing Cancel will not change the database.
</div>

JAVASCRIPT / jQuery

$(document).ready(function() {
    $("#confirmation_dialogue").dialog({
        autoOpen : false,
        modal : true,
        title : "<div class='widget-header'><h4><i class='icon-ok'></i> Delete Item </h4>      </div>",
        buttons : [{
            html : "Cancel",
            "class" : "btn btn-default",
            click : function() {
                $(this).dialog("close");
            }
        }, {
            html : "Delete",
            "class" : "dialog btn btn-info",
            click : function() {
                $(this).dialog("close");
                $('#del_form')[0].submit(); //<<<<<<<===
            }
        }]

    });

    $('#del_form').on('submit', function(e) {
        e.preventDefault();
        $('#confirmation_dialogue').dialog('open'); //<<<<<<===
    });
});