用javascript创建的HTML表单不会响应.submit

HTML Form created in javascript does not respond to .submit

本文关键字：响应 submit 表单 HTML javascript 创建      更新时间：2023-09-26

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

这是一个小提琴：http://jsfiddle.net/dwha77g4/4/

以下代码：

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

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

试试...工作演示

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

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

代码的问题在于，当您将 listerner 添加到提交事件时，没有与查询 '.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();
    });
});

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

用于创建事件侦听器函数的顶部代码在将 html 代码段插入 DOM 之前运行，因此它不会绑定到实际窗体。您希望使用 .on（） 将事件绑定到将来添加的 DOM 内容。只需查看 .on（） 的 jquery 文档，非常不言自明。

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

对于 DOM 中的新对象，我们必须使用 "on" jQuery 函数。 http://api.jquery.com/on/因此，请尝试按照建议更改文档的正文。

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

话虽如此，如果您想发送表单，则不应使用"e.preventDefault"。我不知道是否是你的情况，因为 e.preventDefault（） 将阻止默认事件的发生。如果您想更好地了解这一点，请参阅此帖子。event.preventDefault（） vs. return false

注意：使用submit_form代替提交表单

相关文章：