1

请参阅下面的代码以获取工作演示。将打开一个 jQuery UI 模式对话框，并要求用户输入密码。如果该submit按钮突出显示，则一切正常。但是，如果输入区域仍然突出显示，则页面似乎重新加载，并且浏览器中的 URL 更改为example.com?confirm_password=asdfasdf#。

我怀疑这是因为我在对话框中嵌入了一个表单，但这是基于 jQuery 示例。

如何解决此问题，以便在突出显示文本输入框的情况下按 Enter 键相当于单击提交？

<html>
<head>
    <title>Problem Demo</title>
    <link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#myDialog').dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "Submit": function() {
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });

            $('#openMyDialog').click(function() {
                $('#myDialog').dialog('open');          
            });
        });
    </script>
</head>
<body>
    <a id="openMyDialog" href="#">Open Dialog</a>
    <div id="myDialog">
        <p style="text-align: left;">Please enter your password.</p> 
        <form>
            <fieldset>
                <label for="confirm_password">Password</label>
                <input type="password" name="confirm_password" id="confirm_password" value="" />
            </fieldset>
        </form>
    </div>
</body>
</html>
4

1 回答 1

0

看起来提交功能仅与按钮键一起使用（仅在单击按钮时才调用按钮提交功能）。

您应该使用显式绑定您的表单

$('yourformselector').submit(function(){
          $(this).dialog('close');
});
于 2012-10-14T20:09:24.697 回答