Question

我有这个HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="modalUI.css">

    <script src="jquery-3.1.1.js"></script>
    <script src="jquery-3.1.1.min.js"></script>

    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
    <script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#create-user').click(function(){
                $('#dialog').dialog("open");
            });

            $('#dialog').dialog({
                draggable: true, 
                resizable: false, 
                closeOnEscape: true,
                modal: true,  
                autoOpen: false
            });
        });
    </script>
</head>
<body>
    <form id="form1">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
            </tbody>
        </table><br>

        <input type="button" value="Show Dialog" id="create-user"/>
        <div id="dialog" title="Create new User">
            <form id="form2" action="">
                <label for="name">FirstName</label><br>
                <input type="text" name="fname" ><br>

                <label for="lastname">LastName</label><br>
                <input type="text" name="lname" ><br>

                <label for="email">Email</label><br>
                <input type="email" name="email" ><br><br>

                <button type="submit" value="Submit" id="submitDemo">Submit</button>
                <button type="reset" value="Reset">Reset</button>
            </form>
        </div>
    </form>
</body>
</html>

弹出对话框时，我的提交按钮不起作用。我应该在jQuery上写些什么？ p.s提交在div对话框之外工作。但是如何使它在对话框中工作？

别介意这个lorem ipsum的事情。（Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam， quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non 事故，在culpa qui officia deserunt mollit anim id est laborum sunt。）

Answer 1

对话框中的提交按钮无效，因为您有嵌套表单 - form2位于form1内，无效。

将对话框（<div id="dialog"及其中的所有内容）移到form1之外，提交按钮将按预期进行回发。

P.S。尽管问题的标题，这个问题的根本原因与jQuery，甚至Javascript无关。它只是格式错误的HTML。

Answer 2

表单标签缺少说明，即... 方法=“发布” 动作=""

Answer 3

如果您可以使用内联Javascript，则可以尝试使用onclick属性。

这就像：

<input type="button" value="Show Dialog" id="create-user" onclick='$("#dialog").dialog("open");' />

如果您可以使用内联Javascript，请尝试使用事件侦听器抛弃jQuery。

<input type="button" value="Show Dialog" id="create-user"/>
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("create-user").addEventListener("click", function () {
        $('#dialog').dialog("open");
    });
});
</script>

编辑：正如其他人所说，您也可以将输入元素更改为按钮。这看起来会更好，因为按钮不是一种形式。

<button type="button" id="create-user">Show Dialogue</button>

提交按钮不适用于HTML代码

3 个答案: