我正在尝试使用JQuery构建一个弹出式聊天客户端，类似于Facebook使用的客户端。为了最大限度地提高效率，每个聊天窗口都是用JQuery构建的，每当点击链接时都会被附加到容器div中，每当"；x〃；单击图标。所有这些都很完美。
我的问题来自于试图使用event.prventDefault((来阻止表单重新加载页面。
demoPage.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Demo</title>
</head>
<body>
<a href="javascript:void(0);" id="startButton"><p>Click</p></a>
<div id="m"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#formID form').submit(function(event){
event.preventDefault(); // prevent page reloading
//do chat stuff
return false;
});
});
$(document).on('click', '#startButton', function(e) {
var $form = $("<form/>", { id: "formID" });
$input = $("<input/>", { class: "c4" });
$button = $("<button/>", { class: "btn", type: "button", text: "button" });
$form.append($input, $button).appendTo("#m");
});
</script>
</body>
</html>
如上所述，当我使用JQuery添加表单时，页面会重新加载。但是，如果表单被编码到HTML中，就像这样：
demoPage2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Demo</title>
</head>
<body>
<a href="javascript:void(0);" id="startButton"><p>Click</p></a>
<div id="m">
<form id="formID"></form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#formID').submit(function(event){
event.preventDefault(); // prevent page reloading
//do chat stuff
return false;
});
});
$(document).on('click', '#startButton', function(e) {
var $input = $("<input/>", { class: "c4" });
$button = $("<button/>", { class: "btn", type: "button", text: "button" });
$input.appendTo("#formID");
$button.appendTo("#formID");
});
</script>
</body>
</html>
当按下回车键时，表单不会重新加载页面，这是所需的结果。这是一个问题，因为这意味着我必须为每个可能的聊天窗口添加一个空表单。
我已经解决这个问题4天了。我尝试将preventDefault((放在表单的onsubmit属性中，然后调用myFormSubmit((，如下所示：
var $form = $("<form/>", { id: "formID", onsubmit: "event.preventDefault(); myFormSubmit();" });
并将我的操作放入myFormSubmit((函数中，但这也不起作用。在谷歌上搜索我的问题也没有发现任何有用的信息。
如有任何解释或建议，我们将不胜感激。
试试这个方法：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="jquerylib/jquery-ui.css" />
<script src="jquerylib/jquery.js"></script>
<script src="jquerylib/jquery-ui.js"></script>
</head>
<body>
<a id="startButton"><p>Click</p></a>
<div id="m">
<div id="m"></div>
<!-- <form id="formID"></form>-->
</div>
<script>
$(function () {
$(document).on('click', '#startButton', function (e) {
var $form = $("<form/>", { id: "formID" });
$input = $("<input/>", { class: "c4" });
$button = $("<button/>", { class: "btn", type: "button", text: "button" });
$form.append($input, $button).appendTo("#m");
$('#formID').submit(function (event) {
event.preventDefault(); // prevent page reloading
//do chat stuff
return false;
});
});
});
</script>
</body>
</html>
在您的代码中，e.preventDefault是由浏览器在找到ID为"的元素之前编译的；formID"；。因此，该命令将不会附加到任何项目。