Jquery .on（）提交事件

Question

我遇到.on()的问题。 我有多个表单元素（带有class="remember"的表单），我还使用AJAX添加了另一个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'时，它也适用于稍后添加的DOM。

Answer 2

我遇到了同样的症状问题。 在我的情况下，事实证明我的提交功能缺少“返回”声明。

例如：

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

Answer 3

这里的问题是“ on”应用于当时存在的所有元素。动态创建元素时，需要再次运行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();

我不喜欢使用'body'或document元素，因为使用制表符和模式，它们往往会徘徊并执行您不期望的操作。除非它是一个简单的1页项目，否则我总是尝试尽可能具体。