Javascript - onsubmit为动态创建的表单不执行函数

Question

我有一个按钮，在单击时生成一个带有多个输入框的新表单（每个元素也动态生成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为该功能？

Answer 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'));

Answer 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
});