jQuery

Question

我正在使用 FoundationPress 主题（Wordpress 主题与 Zurb 框架的 Foundation 6），我想 ajax 对其进行修改。（使用 Ajaxify Wordpress 站点插件）。

现在我的问题是我网站上的大多数 javascript 在 ajax 加载后无法正常工作。

我发现这是因为 foundation.js 文件中的大部分 javascript 是在 document.ready 上执行的，而这使用 ajax.

加载页面时，事件未被触发
我了解无法在页面加载后触发 document.ready 事件。在这里看到多个线程后，似乎唯一的解决方案是使用 document.ready 和 ajaxComplete.
所需的代码创建一个新函数
但是，Foundation 有很多 javascript 文件，其中大部分超出了我的理解水平。有没有什么方法可以创建一个函数来自动执行此操作？

编辑
我试过了。我需要将 jQuery 作为参数传递，否则 initialiseSticky 中的代码将不起作用。它适用于 document.ready 但不适用于 ajaxComplete，知道吗？

jQuery(function($) { console.log('document ready- sticky'); initialiseSticky($); }); $(document).ajaxComplete(function ($) { console.log('ajax complete- sticky'); initialiseSticky($); }(jQuery)); function initialiseSticky($) { //my code }

Answer 1

不确定 foundation.js 但如果你可以创建一个变量，例如 FooBar，请在 [=15] 中分配 function() =] 到那个变量，然后在 ajaxComplete 上再次调用 variable/function 到 "re-trigger" 它，如下所示：

jsFiddle

var res = $('#result'),
  bg = $('#bg-div'),
  btn = $('#btnTest'),
  i = 0, // just for demo to illustrate that it is changing
  FooBar;

$(document).ready(FooBar = function() {
  bg.delay(200).fadeIn(2000);
  console.log('document is ready ' + i++);
});

// simulate ajaxComplete 
btn.on('click', function() {
  res.text('just dummy text here ' + i);
  bg.fadeOut(500);
  FooBar();
});

body { margin: 0; padding: 0 }
#bg-div { background-color: orange; width: 100%; height: 100%; position: fixed; z-index: -1; display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="bg-div"></div>
<button id="btnTest">Click Me</button>
<div id="result"></div>

jQuery - 如何在 ajaxComplete 上创建一个新函数来模拟 document.ready？

jQuery - How to create a new function to simulate document.ready on ajaxComplete?

javascript

ajax

wordpress

zurb-foundation