AJAX重新加載後重新啓動準備好的事件

Question

我研究了其他線程，只是感到困惑。

情況：我提供了一個通用的jQuery插件，用於加載用戶通過AJAX動態指定的div。一切正常，但在例如一個用戶的頁面，有一塊JS沒有被調用，因爲「ready」事件沒有被刷新。

通常情況下，用戶的其他jQuery的東西將被放置在jQuery（document）.ready之後。

我剛剛測試呼叫：

$(document).trigger('ready'); 

手動 - 它完全沒有影響，因爲我假定「準備」之稱只有一次，只有一次。

處理它的正確方法是什麼？ （這將是巨大的，提供最通用的解決方案可能）

我很樂意做這樣的事情在這個線程建議：

Trigger $document.ready (so AJAX code I can't modify is executed)

但我認爲，readyList現在是私人的，不會被直接操縱了嗎？

值得一提的是，我所提供的插件爲用戶提供了回調功能。當然，（他）可以將加載後的處理JS代碼放在那裏。

提前感謝和親切的問候

Answer 1

你不應該試圖重新加載整個DOM就緒功能。如果你這樣做，特別有害的是事件的n + n性質，例如，如果同一元素上的兩個點擊事件可能變成4，然後8等等，如果DOM準備功能被它們重複地重新發射的話。

您可以通過在您完成ajax調用後取出需要運行的代碼來避免這種情況，並且可能希望您希望從要重新初始化的事件中受益的元素的總數。

$(document).ready(function() 
{ 
    initialise(); 

    //... Resume with DOM ready 
}); 

function initialise() 
{ 
    // create event here that needs re-initialising 
} 

因此，當你與你的Ajax調用完成再打電話initialise()。

或者看看使用.on並使用它的冒泡功能，這是我將如何處理這種問題。它避免了您必須考慮在腳本中重新初始化DOM準備好函數的任何部分。

附加從評論

.on允許你綁定事件的頁面不隨時更改，低層次的元素，同時允許你控制哪些動態元素的實際範圍內的觸發事件容器。

<div id="container"> 

    <div id="ajax-content"> 

     <a href="#" class="created-link">A new link</a> 

    </div> 

</div> 

所以我們知道<a>由DOM ready事件後一個Ajax功能創建的解僱，因此適用於它，然後任何直接的事件是行不通的。

相反，我們會將事件綁定到較低級別的未更改元素，並向上冒泡到包含動態DOM元素。

$('#container').on('click', '.created-link', function(event) 
{ 
    event.preventDefault(); 

    // Your normal onclick code 
}); 

Answer 2

它看起來喜歡與＃關聯，因爲href不起作用。請照顧這一點。 :)

Answer 3

只是爲了分享我的發現和解決方案，我有同樣的問題，在AJAX重新加載$（document）.ready函數不被稱爲 這個問題我已經使用了這兩個答案的組合，最終發現了一個很簡單的解決方案

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

我的解決方案看起來像這樣

<script type="text/javascript"> 
function initialise(){ 
    $('.clickableItem').click(function(){ 
     /* do code here */ 
     return false; 
    }); 
}; 
$(document).ready(function(){ 
    initialise(); 
}); 
$(document).ajaxComplete(function() { 
    initialise(); 
}); 
</script> 

希望這可以幫助別人