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加载新页面时触发。< / p>

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和Turbolinks page:load事件附加处理程序。

Turbolinks通过使用AJAX获取目标URL并替换当前文档的内容来加速页面加载。由于turbolinks交换了内容，因此您附加到文档中元素的任何事件处理程序都将丢失。

通过在page:load事件触发时附加处理程序，您确保在turbolinks替换内容时也会触发任何非幂等转换。否则，它们只会在初始页面加载或手动刷新浏览器时触发。

虽然在大多数情况下最好使用这样的幂等处理程序：

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

或委派文件中的事件：

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

jquery - $（document）.ready（和$（document）.on（＆＃39; ready page：load＆＃39;

2 个答案: