jQuery - 如何创建一个新的函数来模拟ajaxComplete上的document.ready?
问题描述:
我正在使用FoundationPress主题(WordPress主题与Zurb框架中的Foundation 6),并且我想对它进行ajaxify。 (使用Ajaxify Wordpress网站插件)。jQuery - 如何创建一个新的函数来模拟ajaxComplete上的document.ready?
现在我的问题是,在我的网站上的大部分JavaScript是不工作后,ajax负载。
我发现,这是因为大多数在foundation.js文件的javascript上document.ready
执行,此事件是没有被加载页面的ajax时触发。
据我所知,页面加载后不可能触发document.ready
事件。在看到多个线程之后,看来唯一的解决方案是使用document.ready
和ajaxComplete所需的代码创建一个新函数。
但是,基金会有很多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
}
答
不确定foundation.js但如果你可以做一个变量,FooBar
例如,在$(document).ready()
分配function()
该变量,然后在ajaxComplete再次调用变量/功能“再触发”它,象下面这样:
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>
谢谢!我的函数是这样写的:!function($){}(jQuery),并且我认为这是Foundation的说法document.ready。我该如何添加变量/函数? 另外,第二次重新载入所有代码是否危险? –
好吧,加载它两次或更多并不危险,但它可能是低效和多余的,这取决于** foundation.js **中的'.ready'函数和哪个部分您要执行两次或多次的代码。 –
当然,最好只是将你想要触发的代码的一部分再次打包到函数内的ajaxComplete上,就像你在问题中所说的“*使用'document.ready'和ajaxComplete *所需的代码创建一个新函数' “但是这又取决于代码的部分代码是如何写入的,这是我不喜欢使用引导,基础等框架的主要原因之一。 –