jQuery-$（document）.ready（和$（document）.on（'ready page：load'

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與服務器為該鏈接發送的內容交換。

由於$(document).ready(...)僅在頁面加載完成時觸發，並且Turbolinks阻止頁面重新加載，因此$(document).ready(...)僅觸發一次，而$(document).on('ready page:load')將在Turbolinks加載新頁面時觸發。

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的ready事件和Turbolinks page:load事件。

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

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

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

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

或委托文檔中的事件：

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