Question

我有一系列与条目相对应的复选框，以及我附加了jquery ui模态确认的全部删除按钮。在这里小提琴：http://jsfiddle.net/BxdWc/。问题是，在确认对话框中按“是”后，它不会提交表单（不由php 处理）。 php代码包含在页面顶部，但我相当确定它与此无关，因为没有代码处理的模式，并正确删除已检查的条目。

JS：

$(function () {
    $("#dialog-confirm-multiple").dialog({
        autoOpen: false,
        resizable: false,
        width: 300,
        modal: true,
        show: {
            effect: "bounce",
            duration: 100
        },
        hide: "drop",
        buttons: {
            "Yes": function () {
                $("#confirm").submit();
                $(this).dialog("close");
            },
            "No": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#doDelete").click(function (e) {
        e.preventDefault();
        $("#dialog-confirm-multiple").dialog('open');
        return false;
    });
});

HTML：

<form post="self.php" id="confirm">
<!-- some inputs .etc -->
<input name="doDelete" type="submit" id="doDelete" value="Delete" class="btn btn-danger">
</form>

Answer 1

看起来你的PHP正在检查点击了哪个按钮。通过$('#confirm').submit();提交表单时，jQuery不包含按钮。如果实际点击按钮，浏览器将仅包括提交中的按钮。

有几种方法可以让按钮名称/值对包含在提交中。

您可以使用$('form').serializeArray();并按this answer

中所述推送doDelete / Delete对

或者你可以通过做这样的事情来逃避。请注意，第二次调用单击删除按钮。按钮单击事件检查它是否是通过触发器（也就是对话框）启动的。第二次，它不会被阻止提交。

$(function () {
    $("#dialog-confirm-multiple").dialog({
        autoOpen: false,
        resizable: false,
        width: 300,
        modal: true,
        show: {
            effect: "bounce",
            duration: 100
        },
        hide: "drop",
        buttons: {
            "Yes": function () {
                $(this).dialog("close");
                $("#doDelete").click();
            },
            "No": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#doDelete").click(function (e,ui) {
        if(e.originalEvent) {
            e.preventDefault();
            $("#dialog-confirm-multiple").dialog('open');
            return false;
        }
    });
});

小提琴是here

Answer 2

我对此进行了一些修改，以便在您用类而不是id表示确认按钮时它可以工作。我是一个javascript新手所以要小心！随意改进这一点。

$(function () {
    $("input.doDelete").click(function (e,ui) {
        var button = $(e.target);
        $("#dialog-confirm-multiple").dialog({
            autoOpen: false,
            resizable: false,
            width: 300,
            modal: true,
            show: {
                effect: "bounce",
                duration: 100
            },
            hide: "drop",
            buttons: {
                "Yes": function () {
                    $(this).dialog("close");
                    button.click();
                },
                "No": function () {
                    $(this).dialog("close");
                }
            }
        });
        if(e.originalEvent) {
            e.preventDefault();
            $("#dialog-confirm-multiple").dialog('open');
            return false;
        }
    });
});

jquery ui确认对话框无效

2 个答案: