尝试使用JavaScript、JQuery和#x2026创建确认框；不起作用

我对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>

函数确认_del（）{
警报（“cd”）；
$（“确认对话”）。对话框({
自动打开：错误，
莫代尔：是的，
标题：“删除项目”，
按钮：[{
html：“取消”，
“类”：“btn btn默认值”，
单击：函数（）{
$（此）.dialog（“关闭”）；
返回false；
}
}, {
html：“删除”，
“类”：“对话框btn btn信息”，
单击：函数（）{
$（此）.dialog（“关闭”）；
返回true；
}
}]
});
}
//…等等，直到

---

发生的情况是，确认框的文本出现在屏幕的底部——好像没有JQ函数对其进行寻址。但是如果我将JQ从confirm_del（）函数中去掉，我似乎无法让confirm_del成功调用它。即使现在，函数中有了它，它似乎也被忽略了——确认框没有出现，删除也会发生。

尝试向confirm_del（）函数添加一个e参数，并在第一行放置一个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;
        }
    }]

});
}

功能确认删除（e）{
e、 预防默认值（）；
警报（“cd”）；
$（“确认对话”）。对话框({
自动打开：错误，
莫代尔：是的，
标题：“删除项目”，
按钮：[{
html：“取消”，
“类”：“btn btn默认值”，
单击：函数（）{
$（此）.dialog（“关闭”）；
返回false；
}
}, {
html：“删除”，
“类”：“对话框btn btn信息”，
单击：函数（）{
$（此）.dialog（“关闭”）；
返回true；
}
}]
});
}

您还需要有一个隐藏的submit，它是从click函数调用的，因为返回true/false返回到click函数而不是父函数。有关如何实现这一点，请参阅本文：

我不建议使用内联JS；这只是坏习惯。另外，出于其他人可能会更好地解释的原因，来自

对话框的
返回true
和
返回false
按钮单击处理程序无法按您期望的方式工作。。。执行过程中出现中断，不允许这些值
true/false
作为函数的返回值。将标记和JS清晰地分开，如下所示：

HTML


删除
按“删除”将从数据库中删除此项目。此操作无法撤消


按“取消”不会更改数据库。

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'); //<<<<<<===
    });
});

$（文档）.ready（函数（）{
$（“确认对话”）。对话框({
自动打开：错误，
莫代尔：是的，
标题：“删除项目”，
按钮：[{
html：“取消”，
“类”：“btn btn默认值”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
}, {
html：“删除”，
“类”：“对话框btn btn信息”，
单击：函数（）{
$（此）.dialog（“关闭”）；
$（“#del_form”）[0].submit（）；//如果我启动了一个函数并将其设置为等于JQ函数（例如：$bool=$（“#确认对话”）.dialog…），然后返回$bool呢？click中的函数不会返回到父函数，而是返回到click。基本上，除了处理click之外，它什么都不做。
$(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'); //<<<<<<===
    });
});