.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 });