javascript - 为多个表单提交动态 JQuery 表单

Question

我有 PHP 搜索数据库，然后为找到的每个结果回显一个 html 表单。这些通过 AJAX 加载到主 HTML 页面到文档加载的 div 中。

现在我想让每个提交的表单都有监听器。它们都有相同的输入。每个表单都有一个递增的处理器 ID（processor1、processor2、processor3等）。

因此，根据结果，它可能少至一个表格或 50 个表格。有没有一种动态的方式来做一个表单提交函数，而不是编写无数重复的函数？

Answer 1

如果你有

<form id="form1">
<form id="form2">

您可以使用类选择器

<form id="form1" class="forms">
<form id="form2" class="forms">

在 jQuery 中：

$(function() {
 $('.forms').submit(function(e){
   e.preventDefault(); //Prevent submit
   console.log($(this)); //Current form submiting

   //Make ajax call for current form
 })
})

如果您需要每个表单的额外数据，您可以使用数据属性

<form id="form2" class="forms" data-myattr="myvalue">

并得到它

...
$(this).data('myattr'); //myvalue
...

Answer 2

如果使用类（由于某种原因）不是一个选项，您也可以使用“开始于”选择器：

$('#processor*').submit(function (e) { 
    e.preventDefault(); 
    ...
});

请注意，上述函数应作为加载表单的 AJAX 函数的回调调用。