jquery - jQuery 的 .on() 方法结合提交事件

Question

我有一个问题.on()。我有多个表单元素（带有 的表单），我还使用 AJAXclass="remember"添加了另一个。form.remember所以，我希望它处理提交事件，例如：

$('form.remember').on('submit',function(){...}) 

但是使用 AJAX 添加的表单不适用于它。

问题出在哪里？它是一个错误吗？

Answer 1

您需要将事件委托给文档级别

$(document).on('submit','form.remember',function(){
   // code
});

$('form.remember').on('submit'工作方式相同，$('form.remember').submit(但当您使用$(document).on('submit','form.remember'then 时，它也适用于稍后添加的 DOM。

Answer 2

我遇到了同样的症状。就我而言，事实证明我的提交函数缺少“return”语句。

例如：

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })

Answer 3

这里的问题是“on”适用于当时存在的所有元素。动态创建元素时，需要再次运行：

$('form').on('submit',doFormStuff);

createNewForm();

// re-attach to all forms
$('form').off('submit').on('submit',doFormStuff);

由于表单通常具有名称或 ID，因此您也可以附加到新表单。如果我要创建很多动态的东西，我将包含一个设置或绑定函数：

function bindItems(){
    $('form').off('submit').on('submit',doFormStuff); 
    $('button').off('click').on('click',doButtonStuff);
}   

因此，每当您创建某些东西（在我的情况下通常是按钮）时，我只需调用 bindItems 来更新页面上的所有内容。

createNewButton();
bindItems();

我不喜欢使用“正文”或文档元素，因为使用选项卡和模式时，它们往往会四处游荡，做一些你意想不到的事情。我总是尽量做到具体，除非它是一个简单的 1 页项目。