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