jQuery的 - 是什麼$（文件）。就緒（和$（文件）。在（ '之間的差就緒頁：加載'

Question

當我使用我有一個jQuery的問題

$(document).ready(function() { alert("!"); }); 

。

此警告信息的工作只是一次！從第一頁（如索引頁）

而當我移動第一頁到其他頁面的其他頁面永遠行不通。

但是當我使用

$(document).on('ready page:load', function() { alert("!"); }); 

它總是工作得很好。 這兩個聲明有什麼區別？

請讓我知道。

Answer 1

$(document).ready(...)是建立在jQuery的功能。它在運行傳遞的函數之前等待DOM加載。每頁加載只能調用一次。

$(document).on('ready page:load', ...)是Turbolinks庫的一部分的自定義偵聽器。

Turbolinks基本上可以防止每次單擊鏈接時重新加載頁面，而是使用JavaScript將頁面HTML與服務器爲該鏈接發送的內容進行交換。

當網頁加載完成，並Turbolinks保持頁面從重裝由於$(document).ready(...)纔會觸發，$(document).ready(...)只會觸發一次，而每當Turbolinks加載了新的一頁$(document).on('ready page:load')將觸發。

Answer 2

$(document).ready(function() { alert("!"); }); 

大致等同於：

$(document).on('ready', function(){ alert("!"); }); 
// or the shorthand 
$(function(){ alert("!"); }); 

所有這些註冊一個回調函數，當文檔準備好運行。

jQuery.on也可以接受空格分隔的事件列表。

$(document).on('ready page:load', function() { alert("!"); }); 

既上連接到jQuery's ready event和Turbolinkspage:load事件的處理程序。

Turbolinks通過使用AJAX獲取目標URL並替換當前文檔的內容來加速頁面加載。由於turbolink將內容交換出來，因此您附加到文檔中元素的任何事件處理程序都將丟失。

通過在page:load事件觸發時附加處理程序，您可以確保在turbolink已替換內容時也會觸發任何非冪等變換。否則，他們只會在初始頁面加載或手動刷新瀏覽器時觸發。

雖然在大多數情況下，最好使用冪等的處理程序是這樣的：

$(document).on('page:change', function(event) { 
    $('#bar').on('click', function(){}); 
}); 

或委託從文檔事件：

$(function(){ 
    $(document).on('click', "#bar", function(){}); 
});