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

Posted 2023-05-09

【中文标题】jQuery 的 .on() 方法结合提交事件

【英文标题】：jQuery's .on() method combined with the submit event

【发布时间】：2013-09-03 22:51:47

【问题描述】：

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

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

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

问题出在哪里？是bug吗？

【问题讨论】：

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

@Sergio 将 document 替换为最近的静态父级。

【参考方案1】：

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

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

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

【讨论】：

还要记住$(document).on 的性能远低于$('form.remember').on('submit'。它现在必须监听文档中的 all 提交事件。如果可能的话，限制范围比听ondocument要好得多

$('body').on('submit','form.remember',function() // 代码 );解决了我的问题

即使@Liam 是正确的，$(document).on 对于 ajax 渲染元素的 CRUD 操作仍然有用。

【参考方案2】：

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

例如：

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

【讨论】：

请注意return false; 不会提交表单。提交表单使用return true;。

如果他使用 ajax - 提交将由 ajax 完成，稍后 200 http 状态将执行预期的活动。所以 return false 会很有用。

【参考方案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 页项目。

【讨论】：

并非如此。而是使用 $(document).on('submit','form',function(e) ...);然后无需“重新连接”

我特别说过我不喜欢在全局文档级别上这样做。对于小型单页项目，这可能没问题；但是如果你有很多不同的模块，它们有自己的表单，如果你的代码没有针对特定的表单，那么全局处理程序会产生很多额外的点击和调试问题。