無需使用$（document）.on即可在ajax內容上使用jQuery腳本

Question

我正在使用使用ajax的無限滾動插件。

當通過ajax加載“下一頁”時，下一頁上的所有其他與ajax相關的腳本均不起作用。 有人告訴我，我必須使用“委托事件”（即，將$(id).click()更改$(document).on ）-問題是這意味着要編輯多個插件並更改數十個函數調用。

有什么辦法可以避免將所有內容更改為$(document).on並使用無限滾動做一些很酷的事情？

我寧願修改無限滾動插件，也不願修改其他與ajax相關的插件以使其適合。

Answer 1

不幸的是，您在這里沒有太多選擇，而切換到委托事件是迄今為止最好的選擇。

問題是您的舊代碼實際上是在為“某些類型的操作”創建整個頁面的響應時，正在將行為分配給“特定元素”。

我看到3種可能性，而且只有其中一種保證有效。

1. 每次加載新頁面時，運行新頁面上所需的任何腳本。 不利的一面是，除非您小心不要在內容加載之間“減少”，否則您的行為會重復或碰撞（例如：兩次彈出窗口，動畫損壞）。
2. 將動態區域封裝在<iframe> 。 根據您的體系結構，這可能實現或可能不實現，當然也很難與已經需要某種頁面結構的某種無限滾動插件集成。
3. 咬住子彈並修復糟糕的代碼。

Answer 2

無論如何，在ajax加載的內容中加載腳本是一種不好的方式 。 您需要的是event delegation以將自身附加到任何動態添加的元素上。

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

Answer 3

如果必須繼續使用.click（），則必須具有一個函數，您可以在每次向頁面添加更多內容時調用新內容來重新掛接事件。

e：盡管值得注意的是，從.click到.on的更改通常可以通過結構合理的查找/替換來處理

Answer 4

事件委托是正確的解決方案。 問題在於，頁面加載后，“下一頁”上的HTML元素不屬於DOM。 因此，如果您執行以下操作：

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

您的處理程序未綁定。

我不會將事件附加到$（document）。 我會將它們附加到最接近的父級，在DOM加載時可用。 例如，body標記或固定寬度包裝器是body的第一個子代（假設您的布局使用這種類型的結構）。

確保您未附加的元素未使用.empty（）清空或未使用.html（）填充，因為這會破壞綁定。 將委托的處理程序附加到DOM樹的下方，可以使您獲得更好的性能，因為事件不必一直冒泡直到文檔節點來觸發您的方法。

您不需要重寫所有功能和插件，只需重寫觸發它們的事件的綁定即可。
我通常使用模塊模式並將方法定義與點擊處理程序分離。 我的所有方法都在外部閉包中定義。 我將在“文檔准備就緒”部分中綁定用戶事件，例如點擊。

例如：

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;   

})(); 

如果將來需要更改綁定，則只需在文檔准備部分中更改調用。