Javascript - onsubmit 用于动态创建的表单不执行功能答案

【问题标题】：Javascript - onsubmit for dynamically created forms not executing functionJavascript - onsubmit 用于动态创建的表单不执行功能
【发布时间】：2018-09-17 04:38:38
【问题描述】：

我有一个按钮，点击后会生成一个带有多个输入框的新表单（每个元素也动态生成 ID）。每个表单都有一个提交按钮。提交时的表单执行一个功能。

<form id='f1' name='form1' onsubmit='return myFunction("1");'>

这是页面中已经存在的默认表单，并且可以正常工作。

对于动态添加的表单，我将 onsubmit 的属性设置为：

var f = document.createElement("form");
var fn = "f"+number_inserted_dynamically;
var funname = "return myFunction(\""number_inserted_dynamically"\");";
f.setAttribute('onsubmit',funname);

这是我在 Chrome 上检查元素时发现的（生成的表单）：

<form id="f2" onsubmit="return myFunction("2");">

但是函数没有被执行。

正如在其他问题之一中所见，我尝试使用

f.onsubmit = myFunction;（在 myFunction 中定义了 number_inserted_dynamically）

这也没用。

怎么了？还要如何为函数动态设置 onsubmit？

【问题讨论】：

标签： javascript onsubmit

【解决方案1】：

<form id="f2" onsubmit="return myFunction("2");"> 是由于引号引起的语法错误。您的onsubmit 将评估为return myFunction(，然后引发语法错误。

代替：

var funname = "return myFunction(\""number_inserted_dynamically"\");";

你会想要的：

var funname = "return myFunction('number_inserted_dynamically');";

所以你最终得到：

<form id="f2" onsubmit="return myFunction('2');">

但是，您确实应该使用Unobtrusive JavaScript，而是使用事件侦听器：

f.addEventListener("submit", return myFunction('2'));

【讨论】：

嗨，谢谢。我尝试将双引号更改为单引号，但同样的事情发生了。我这样做了：var funname="return myFunction('"+elno+"');";。 addEventListener 也不起作用。在这两种情况下，表单都会在单击提交按钮时消失。
顺便说一句，当我尝试addEventListener 时，没有创建任何表单。单击按钮添加表单什么也没做。

【解决方案2】：

如果是 jQuery：

var eleForm = $('<form>...</form>');

$('body').append(eleForm); // append the form to body

eleForm.on('submit', function() {
   // here to put your code about submitting form
});

【讨论】：