在javascript中创建的HTML表单不响应。提交

我已经使用javascript向html页面动态添加了一个表单。当我这样做时，表单上的.submit不起作用。但是，如果我在html中创建完全相同的表单，它将按预期工作

这是一把小提琴：

以下代码：

$('.submit-form').submit(function(e){
    alert("test");
    e.preventDefault();
});

在小提琴的第一个按钮上运行，但不是第二个动态创建的按钮。

试试

---

基本上，动态创建的内容不能很好地处理先前附加的事件。由于在尝试运行提交时对象不存在，因此没有可附加的内容。我在这里所做的是在搜索.submit表单的主体上附加一个on事件，而不管它是在何时创建的。

创建事件侦听器函数的顶级代码在将html片段插入DOM之前运行，因此它与实际表单无关。您希望使用.on将事件与将来添加的DOM内容联系起来。 只需在jquery文档中签出.on，这是不言自明的

---

您还可以重新组织代码，以便在插入HTML代码段后设置.submit，并且它也适用于您。

代码的问题是，当您将listerner添加到submit事件时，没有与查询“.submit form”匹配的元素，因为您的dinamic表单尚未创建

你能行

$(document).ready(function() {
    var formHTML = "<li><form action='#' method='POST' class='submit-form'><input type='submit' value='submit dynamic' /></form></li>"
    $("#list-container").append(formHTML);

    $('.submit-form').submit(function(e){
       alert("test");
       e.preventDefault();
    });
});

---

这样，您将创建表单，然后将侦听器添加到提交事件。

对于DOM中的新对象，我们必须在jQuery函数上使用它。 所以，尝试将文档的正文更改为建议格式

$(document).on("submit", ".submit_form", function(e){
    e.preventDefault();  
    alert("test");

});

也就是说，如果您想发送表单，就不应该使用e.preventDefault。我不知道这是否是你的情况，因为e.preventDefault将阻止默认事件发生。如果你想更好地了解这一点，请参阅本文

---

注意：使用submit_form代替submit form

感谢您提供的解决方案以及对正在发生的事情的出色解释。感谢@Jatin提供的JSFIDLE！

$(document).on("submit", ".submit_form", function(e){
    e.preventDefault();  
    alert("test");

});