Javascript event.preventDefault不适用于使用JQuery创建的表单_Javascript_Jquery_Events

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

javascript jquery events

Javascript event.preventDefault不适用于使用JQuery创建的表单,javascript,jquery,events,Javascript,Jquery,Events,我正在尝试使用JQuery构建一个弹出式聊天客户端，类似于Facebook使用的客户端。为了最大限度地提高效率，每个聊天窗口都使用JQuery构建，并在单击链接时附加到容器div中，在单击“x”图标时销毁。所有这些都很好地发挥了作用我的问题来自尝试使用event.preventDefault（）来阻止表单重新加载页面 demoPage.html： <!DOCTYPE html> <html lang="en"> <head>

我正在尝试使用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>


表格演示
$（函数（）{
$（'formID form'）。提交（函数（事件）{
event.preventDefault（）；//防止页面重新加载
//聊天
返回false；
});
});
$（文档）.on（'单击'，'开始按钮'），函数（e）{
var$form=$（“”，{id:“formID”}）；
$input=$（“”，{class:“c4”}）；
$button=$（“”，{类：“btn”，类型：“button”，文本：“button”}）；
$form.append（$input，$button）.appendTo（“#m”）；
});

如上所述，当我使用JQuery添加表单时，页面将重新加载。但是，如果表单编码为HTML，如下所示：

var $form = $("<form/>", { id: "formID", onsubmit: "event.preventDefault(); myFormSubmit();" });

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>


表格演示
$（函数（）{
$（'#formID'）。提交（函数（事件）{
event.preventDefault（）；//防止页面重新加载
//聊天
返回false；
});
});
$（文档）.on（'单击'，'开始按钮'），函数（e）{
var$input=$（“”，{class:“c4”}）；
$button=$（“”，{类：“btn”，类型：“button”，文本：“button”}）；
$input.appendTo（“#formID”）；
$button.appendTo（“#formID”）；
});

按下enter键时，表单不会重新加载页面，这是所需的结果。这是一个问题，因为这意味着我必须为每个可能的聊天窗口添加一个空表单

我已经研究这个问题4天了。我尝试将preventDefault（）放入表单的onsubmit属性中，然后调用myFormSubmit（），如下所示：

var $form = $("<form/>", { id: "formID", onsubmit: "event.preventDefault(); myFormSubmit();" });

var$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>


点击
$（函数（）{
$（文档）.on（'单击'，'开始按钮'），函数（e）{
var$form=$（“”，{id:“formID”}）；
$input=$（“”，{class:“c4”}）；
$button=$（“”，{类：“btn”，类型：“button”，文本：“button”}）；
$form.append（$input，$button）.appendTo（“#m”）；
$（'#formID'）。提交（函数（事件）{
event.preventDefault（）；//防止页面重新加载
//聊天
返回false；
});
});
});

在您的代码中，e.preventDefault由浏览器编译，然后才能找到ID为“formID”的元素。因此，该命令将不会附加到任何项目。

我认为它是@Mihail Feraru的副本，虽然我承认我的问题有点类似，但我向你保证，我看到的帖子和我的帖子不是副本。不同的是，preventDefault只在我实际将表单添加到HTML中时对我有效，而在JQuery添加表单时对我无效。这完全是有道理的，而且效果非常好。非常感谢。我想我需要出去走走。英雄联盟