event.preventDefault 不适用于使用 JQuery 创建的表单答案

【问题标题】：event.preventDefault not working for form created with JQueryevent.preventDefault 不适用于使用 JQuery 创建的表单
【发布时间】：2020-08-02 19:24:19
【问题描述】：

我正在尝试使用 JQuery 构建一个类似于 Facebook 使用的弹出式聊天客户端。为了最大限度地提高效率，每个聊天窗口都使用 JQuery 构建，并在单击链接时附加到容器 div 中，并在单击“x”图标时销毁。所有这些都运行良好。

我的问题来自于尝试使用 event.preventDefault() 来阻止表单重新加载页面。

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() 函数中，但这也不起作用。谷歌搜索我的问题也没有发现任何有用的信息。

任何解释或建议将不胜感激。

【问题讨论】：

我认为是stackoverflow.com/questions/15051128/…的复制品
@Mihail Feraru 虽然我承认我的问题有点相似，但我向你保证，我看到了那个帖子，而我的不是重复的。不同之处在于，preventDefault 仅在我将表单物理添加到 HTML 时才对我有效，但在由 JQuery 添加时无效。

标签： javascript jquery events

【解决方案1】：

试试这个方法：

<!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”的元素。因此，该命令将不会附加到任何项目。

【讨论】：

小崽子，现在我觉得自己很笨。这完全有道理，而且效果很好。谢谢！我想我需要出去走一走。大声笑！