Question

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

以下代码：

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

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

Answer 1

尝试... Working Demo

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

基本上，动态创建的内容不能很好地处理先前的附加事件。由于在您尝试运行提交时该对象不存在，因此无需附加任何内容。我在这里做的是将一个on事件附加到搜索.submit-form的正文上，无论它何时被创建。

Answer 2

代码的问题在于，当您将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();
    });
});

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

Answer 3

创建事件侦听器函数的顶级代码在将html代码段插入DOM之前运行，因此它与实际表单无关。您希望使用.on（）将事件绑定到将来添加的DOM内容。只需检查.on（）的jquery文档，非常自我解释。

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

Answer 4

对于DOM中的新对象，我们必须使用＆＃34; on＆＃34; jQuery函数。 http://api.jquery.com/on/ 所以尝试改变文件的正文作为建议rformal。

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

});

说，你不应该使用＆＃34; e.preventDefault＆＃34;如果你想发送你的表格。我不知道是不是你的情况，因为e.preventDefault（）会阻止发生默认事件。如果您想更好地了解这一点，请参阅此帖子。 event.preventDefault() vs. return false

注意：使用submit_form而不是submit-form

在JavaScript中创建的HTML表单不响应.submit

4 个答案: