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_dynamic）

也不起作用。

出了什么问题？还应该如何动态设置函数的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
});

Javascript-动态创建的表单的onsubmit不执行功能

2 个答案: