使用 javascript 页面转换时替代 jquery $(document).ready(handler)

Question

在我的 wordpress 网站的一个简单插件中，我编写了如下设置点击事件的代码：

$(document).ready(function() {
    $("#myButton").click(function() {
        //do stuff
    });
});

当我直接加载相关页面 时，此代码按预期工作。 但是，用户访问页面的方式是通过主题 header 中的 link。我不太确定主题中的页面转换是如何工作的，但最终效果是每当单击 link 时，都会发生一些动画，页面淡出，新页面淡入。问题是 $ (document).ready() 不会在新页面淡入时触发，因此点击处理程序不起作用。

如何更改代码以便在新页面淡入时注册点击处理程序？

如果有必要查看主题是如何工作的，我使用的是Bridge Theme。主题的演示版本可用 here。

更新：稍微玩了一下主题页面转换后，我怀疑主题正在使用 ajax 获取新页面内容，淡出旧页面内容，淡入新页面内容，然后 "artificially" 修改url 以显示新页面 url。

Answer 1

您可以使用以下方法之一：

DOM方式

window.onload = function() { // 用 DOM 做事 }
直接jQuery翻译

$(document).ready(function() { // 用 DOM 做事 });
jQuery方式

$(function() { // 用 DOM 做事 });

Answer 2

如果您将点击事件绑定到文档，它将应用于加载文档或在加载文档后创建的元素。

可以这样做：

$(document).on('click', '#myButton', function() { /* ... */ });

使用 javascript 页面转换时替代 jquery $(document).ready(handler)

Alternative to jquery $(document).ready(handler) when using javascript page transitions

javascript

jquery

wordpress

transition