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

我遇到了相同符号的问题。在我的例子中，我的提交函数缺少"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();

我不喜欢使用"body"或文档元素，因为有了选项卡和模态，它们往往会挂在那里，做一些你意想不到的事情。我总是尽量具体，除非是一个简单的1页项目。