提交按钮不适用于HTML代码
我有这个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上写什么？ ps在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 practitation ullamco laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in renhenderit in voluptate velp esse esse cillum dolore eu fugiat nulla pariatur。Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。）
你的对话框中的提交按钮不起作用，因为你有嵌套的表单 - form2在form1 ，这是无效的。
将对话框（ <div id="dialog"及其内的所有内容）移动到form1外，提交按钮将按预期方式执行回发。
PS尽管问题的标题，这个问题的根本原因是与jQuery，甚至Javascript无关。 这只是格式不正确的HTML。
如果您可以使用内联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>