.live()、.delegate() 或 .on() 都不适用于动态加载到页面的表单

Question

我有一个无限滚动的页面。 ajax 功能对于最初加载时页面上存在的表单可以正常工作，但对于从无限滚动 ajax 功能加载的表单不起作用。我已经搜索了大约 5 天试图找到答案，但还没有。以下是 javascript 的一部分：

$("form:not(.member)").submit(function() {
     var status_id = $('#status_id').val(), 
    etc..........

:not(.member) 部分的原因是页面上的其他表单（例如搜索表单）不包含在脚本中。

我已经尝试过

 $("form:not(.member)").live('submit', function() {

，

 $("form:not(.member)").on('submit', function() {

并且

 $('body').delegate('submit', 'form:not(.member)', function() {

这些都不适用于初始页面加载后加载的表单。 有人还有其他建议吗？ 顺便说一句，我正在使用jquery 1.7.1。 我也尝试过

$("form:not(.member)").bind('submit', function()

Answer 1

您在这里使用了错误的事件委托。

表单也动态加载，因此当代码运行时它们不包含在$("form:not(.member)")中，它们还不存在。

在包含表单的父元素上使用委托：

$('#formsContainer').on('submit', 'form:not(.member)', function() {
     ...
});

Answer 2

你的语法只是错误的，仅此而已。这些功能应该可以工作。以 .on() 为例：

$('#someListener').on('submit', 'form:not(.member)', function() { ... });

其中 someListener 是永远不会被 AJAX 函数破坏的祖先元素。如果您尝试绑定到被破坏的元素，您的侦听器也会丢失。

必须承认，我认为 'form:not(".member")' 部分对我来说也不合适。您确定这是 not 的正确语法吗？我只是相信你的话。

无论如何，有一个更好的方法：要么 #someListener 是一个祖先，其中没有其他表单（如搜索表单），要么您为这种特定类型的表单提供一个类。因此，您不必排除 .member 表单，而是只针对这种表单：

$('#someListener').on('submit', '.dynamicForm', function() { ... });

或者，如果 Ajax 内容块（表单和所有）具有某种包装器，您可以向其中添加一个类（例如，".ajaxBlock"）并按以下方式执行：

$('#someLIstener').on('submit', '.ajaxBlock form', function() { ... });

Answer 3

上述答案均无效。解决方案是将 onclick="function" 分配给所有评论表单，包括已加载的评论表单。

Answer 4

$("#parentContainer").on("submit", "form:not(.member)", function() { // code });