Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
    <form id="fooForm">
        <script type="text/javascript">
            function FooMethod() {
                alert('hello');
            }
            var fooButton;
            var fooForm;
            var fooDialog;
            $(document).ready(function() {
                InitializeVariables();
                InitiliazeDialog();
                InitiliazeForm();
            });
            function InitializeVariables() {
                fooButton = $('#fooButton');
                fooForm = $('#fooForm');
                fooDialog = $('#fooDialog');
            }
            function InitiliazeDialog() {
                var dialogOpenMethod = function () {
                    fooDialog.dialog('open');
                    return false;
                };
                var submitMethod = function () {
                    fooButton.unbind('click', dialogOpenMethod);
                    fooButton.click();
                };

                fooDialog.dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        'Ja': submitMethod,
                        'Nein': function () {
                            fooDialog.dialog('close');
                        }
                    }
                });

                fooButton.bind('click', dialogOpenMethod);
            }
            function InitiliazeForm() {
                fooButton.button();
                fooForm.submit(function () {
                    alert('doing a submit');
                });
            }
        </script>
        <input type="submit" id="fooButton" value="submit it!" onclick="FooMethod();"></input>
        <div id="fooDialog">
            Dialog info
        </div>

    </form>
</body>
</html>

我在做什么？
我想要一个模态确认：用户点击按钮，确认“你真的想......？”，用户点击“是”，这个点击取消绑定原始点击处理程序并再次点击该按钮（这应该导致提交）。

什么/为什么不起作用？
确实你需要一个特例。除非您设置modal: false，否则此演示将无法使用有趣的是：原始处理程序（onclick="FooMethod();"）在模态和非模态对话框中调用。

修改
我根据graphicdivines answer调整了我的样本，以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
    <form id="fooForm" method="POST" action="">
        <script type="text/javascript">
            var fooButton;
            var fooForm;
            var fooDialog;
            $(document).ready(function() {
                InitializeVariables();
                InitiliazeDialog();
                InitiliazeForm();
            });
            function InitializeVariables() {
                fooButton = $('#fooButton');
                fooForm = $('#fooForm');
                fooDialog = $('#fooDialog');
            }
            function InitiliazeDialog() {
                var dialogOpenMethod = function () {
                    fooDialog.dialog('open');
                    return false;
                };
                var submitMethod = function () {
                    fooButton.unbind('click', dialogOpenMethod);
                    fooButton.click();
                };

                fooDialog.dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        'Ja': submitMethod,
                        'Nein': function () {
                            fooDialog.dialog('close');
                        }
                    }
                });
                var dialogZ = fooDialog.dialog('option', 'zIndex');

                fooButton.bind('click', dialogOpenMethod);
            }
            function InitiliazeForm() {
                fooForm.submit(function () {
                    alert('doing a submit');
                });
            }
        </script>
        <input type="submit" id="fooButton" value="submit it!" style="z-index: 9999;"></input>
        <div id="fooDialog">
            Dialog info
        </div>

    </form>
</body>
</html>

为什么吗
正如你可以看到here，我试图避免使用令人讨厌的z-index-checker。但它不会起作用。

Answer 1

在我重新点击提交之前，我似乎需要关闭对话框。由于modal禁用了页面上的所有内容，因此必须关闭对话框或无法点击提交内容。所以你的提交方法变为：

var submitMethod = function () {
    fooDialog.dialog('close'); // add this line ==============
    fooButton.unbind('click', dialogOpenMethod);
    fooButton.click();
};

Answer 2

为什么不指定HTML表单方法？默认的表单方法是GET。所以你应该：

<form id="fooForm" method="post" action="">

动作可以是其他内容，它取决于您的提交处理逻辑的URL。

修改：而不是单击提交按钮，只需直接提交表单。

fooDialog.dialog({ autoOpen: false, modal: true, buttons: { 'Ja': function() { $('#fooForm').submit(); }, 'Nein': function () { fooDialog.dialog('close'); } } });

通过javascript单击按钮不会导致发布

2 个答案: