jQuery .on（）提交事件

98

我有一个问题.on()。我有多个表单元素（带有的表单class="remember"），我还form.remember使用AJAX 添加了另一个表单元素。因此，我希望它处理类似以下的Submit事件：

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

但是添加了AJAX的表单无法使用。

问题出在哪里？是虫子吗？

jquery ajax forms submit

— 安东·阿布拉莫夫
source

9

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

— Sergio

1

@Sergio document用最接近的静态父代替换。

— Mark Baijens

217

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

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

$('form.remember').on('submit'的工作原理与$('form.remember').submit(您使用时相同，但$(document).on('submit','form.remember'也适用于以后添加的DOM。

— Dipesh Parmar
source

24

还请记住，$(document).on它的性能要比差得多$('form.remember').on('submit'。现在，它必须侦听文档中的所有提交事件。on document如果可能的话，最好稍微限制范围而不是听

— Liam 2014年

7

$（'body'）。on（'submit'，'form.remember'，function（）{//代码}）; 解决了我的问题

— Olotin Temitope，

即使@Liam是正确的，$（document）.on仍可用于对ajax呈现的元素进行CRUD操作。

— Norielle Cruz

38

我有相同症状的问题。以我为例，事实证明我的Submit函数缺少“ return”语句。

例如：

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

— vitor_gaudencio_oliveira
source

2

请注意，return false;不会提交表格。用于提交表单return true;。

— Kai Noack

0

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

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

createNewForm();

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

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

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

因此，每当您创建某些内容（通常是按钮）时，我只要调用bindItems即可更新页面上的所有内容。

createNewButton();
bindItems();

我不喜欢使用'body'或document元素，因为使用制表符和模式时，它们往往会闲逛并做您不希望的事情。除非它是一个简单的1页项目，否则我总是尝试尽可能具体。

— 丹尼尔
source