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功能可以解决它。但是如果我从wins_del（）函数中取出JQ，我似乎无法获得confirm_del来成功调用它。即使是现在，在函数中，它似乎被忽略 - 确认框没有出现，并且删除发生。

Answer 1

尝试在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;
        }
    }]

});
}

你还需要有一个隐藏的提交，它是从click函数调用的，因为return true / false返回到click函数而不是父函数。请参阅此帖子，了解如何实现：Jquery dialog buttons return value

Answer 2

DEMO

我不建议使用内联JS ;这只是不好的做法。另外，由于其他人可以更好地解释的原因，来自return true按钮点击处理程序的return false和dialog将无法按照您期望的方式工作...那里＆＃39; sa执行中断，不允许这些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'); //<<<<<<===
    });
});

尝试使用JavaScript，JQuery制作确认框......无法正常工作

2 个答案: