Javascript 不使用$（document）的ajax内容上的jQuery脚本

我正在使用一个使用ajax的无限滚动插件

通过ajax加载“下一页”时，下一页上所有其他与ajax相关的脚本都无法工作。有人告诉我，我必须使用“委派事件”（即更改

$（id）。单击（）

到

$（文档）。在

）上-问题是这意味着编辑多个插件和更改几十个函数调用

有什么方法可以避免将所有内容都更改为

$（文档）。在

上，使用无限卷轴做一些很酷的事情

---

我更愿意修改infinite scroll插件，而不是修改其他与ajax相关的插件以使其适合。

如果您必须继续使用.click（），那么您必须拥有一个函数，可以在每次向页面添加更多内容时调用新内容以重新钩住事件

---

e:虽然值得注意的是，如果您必须继续使用.click（），则从.click到.on的更改通常可以通过结构正确的查找/替换来处理。如果必须继续使用.click（），则您必须具有一个函数，可以在每次向页面添加更多内容时调用新内容以重新挂钩事件

---

e:虽然值得注意的是，从.click到.on的更改通常可以由结构正确的查找/替换来处理，但不幸的是，您在这里的选项很少，而且是迄今为止最好的

问题在于，旧代码将行为分配给“特定元素”，而它真正应该做的是创建对“特定类型的操作”的页面范围的响应

我看到了3种可能性，其中只有一种保证有效

每次加载新页面时，在新页面上运行所需的任何脚本。这里的缺点是，除非你小心在内容加载之间“撕毁”，否则你会有重复或相互冲突的行为（例如：双弹出窗口、损坏的动画）

将动态区域封装在

s中。根据您的架构，这可能是可能的，也可能是不可能的，当然，要与某种已经需要某种页面结构的无限滚动插件集成并不容易

咬紧牙关，修复糟糕的代码

---

不幸的是，你在这里几乎没有选择，而且是迄今为止最好的选择

问题在于，旧代码将行为分配给“特定元素”，而它真正应该做的是创建对“特定类型的操作”的页面范围的响应

我看到了3种可能性，其中只有一种保证有效

每次加载新页面时，在新页面上运行所需的任何脚本。这里的缺点是，除非你小心在内容加载之间“撕毁”，否则你会有重复或相互冲突的行为（例如：双弹出窗口、损坏的动画）

将动态区域封装在

s中。根据您的架构，这可能是可能的，也可能是不可能的，当然，要与某种已经需要某种页面结构的无限滚动插件集成并不容易

咬紧牙关，修复糟糕的代码

---

无论如何，在ajax加载的内容中加载脚本是一种糟糕的开始方式。您需要的是

事件委派

将自身附加到任何动态添加的元素

$("body").on("click", ".yourclass", function() {
    //This function will run for every element with `yourclass` class you load via ajax
});

---

无论如何，在ajax加载的内容中加载脚本是一种糟糕的开始方式。您需要的是

事件委派

将自身附加到任何动态添加的元素

$("body").on("click", ".yourclass", function() {
    //This function will run for every element with `yourclass` class you load via ajax
});

---

事件委派是正确的解决方案。问题是加载页面时，“下一页”上的HTML元素不是DOM的一部分。因此，如果您做了如下操作：

$(function() {
    $('#some-element-on-the-next-page').click(function() {
        foo();
    }); 
});

您的处理程序未绑定

我不会将事件附加到$（文档）。我会将它们附加到DOM加载时可用的最近的父级。例如，主体标记或固定宽度包装，它是主体的第一个子项（假设布局使用这种类型的结构）

请确保附加到的元素没有用.empty（）清空或用.html（）重新填充，因为这将破坏绑定。在DOM树的较低位置附加委托处理程序将为您提供更好的性能，因为事件不必一直冒泡到文档节点来激发您的方法

您不需要重写所有函数和插件，只需重写触发它们的事件的绑定。
我通常使用模块模式，并从单击处理程序中分离方法定义。我的所有方法都在外部闭包中定义。我将有一个“documentready”部分，在其中绑定用户事件，如单击

例如：

var myModule = (function() {

    var public = {};

    public.foo = function() {
        // do something cool here
    };


    // document ready
    $(function () {

        $('#site-container').on('click', '.js-foo', function() {
            public.foo();
         });

    });


    return public;   

})(); 

---

如果将来需要更改绑定，只需在DocumentReady部分中更改调用

事件委派是正确的解决方案。问题是加载页面时，“下一页”上的HTML元素不是DOM的一部分。因此，如果您做了如下操作：

$(function() {
    $('#some-element-on-the-next-page').click(function() {
        foo();
    }); 
});

您的处理程序未绑定

我不会将事件附加到$（文档）。我会将它们附加到DOM加载时可用的最近的父级。例如，主体标记或固定宽度包装，它是主体的第一个子项（假设布局使用这种类型的结构）

请确保附加到的元素没有用.empty（）清空或用.html（）重新填充，因为这将破坏绑定。在DOM树的较低位置附加委托处理程序将为您提供更好的性能，因为事件不必一直冒泡到文档节点来激发您的方法

您不需要重写所有函数和插件，只需重写触发它们的事件的绑定。
我通常使用模块模式，并从单击处理程序中分离方法定义。