我正在编写一个脚本来加载我的页面而不刷新。除了一件事之外,它正在按我想要的方式工作。我的测试场地是http://dev.dog-company.com . 现在只有home About us和FAQ可以使用脚本。
主页上有一个通过插件加载的滑块(在主页上单击主页)。当我通过AJAX加载它时,我的脚本并没有按照预期的方式加载它。我不知道为什么。有人能解释一下为什么它不起作用吗?
$(\'document\').ready(function() {
$(\'a[rel="load"]\').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
if(link!=window.location){
window.history.pushState({path:link},\'\',link);
}
$(\'#slider-wrapper\').slideUp().empty();
$(\'#content\').wrap(\'<div id="wrap-overlay"></div>\');
$.ajax({
//ajax setting
type: \'POST\',
url: link,
dataType: \'html\',
success : function(data, text, xhr){
//parse data
var response = $("<div>").html(data);
var parser = new DOMParser();
var preParse = data.match(/<head[^>]*>[\\s\\S]*<\\/head>/gi);
var headHTML = parser.parseFromString(preParse, "text/html");
var head = $(headHTML).find(\'head\').html();
var slider = response.find(\'#slider-wrapper\').html();
var content = response.find(\'#content\').html();
var footer = response.find(\'#wp-footer\').html();
//Post data
$(\'#content\').empty().append(content);
$(\'head\').empty().append(head);
if(slider != null){
if($("#slider-wrapper").length == 0){
$(\'#content\').insertBefore(\'<section id="slider-wrapper"></section>\');
}
$("#slider-wrapper").empty().append(slider);
}
$("#content").empty().append(content);
return false;
}})
if($(\'#slider-wrapper\').length > 0){
$(\'#slider-wrapper\').slideDown();
}
});
});
任何帮助都将不胜感激,
SO网友:Subharanjan
你可以re-initialize all the scripts 再次在AJAX内部取得成功。
// Fetch the scripts
scripts = \'\';
if ( scripts.length ) scripts.detach();
scripts = response.find(\'script\');
// Add the scripts
scripts.each(function(){
var script = jQuery(this),
scriptText = script.html(),
scriptNode = document.createElement(\'script\');
try {
// doesn\'t work on ie...
scriptNode.appendChild(document.createTextNode(scriptText));
contentNode.appendChild(scriptNode);
} catch(e) {
// IE has funky script nodes
scriptNode.text = scriptText;
contentNode.appendChild(scriptNode);
}
if(jQuery(this).attr(\'src\') != null) {
scriptNode.setAttribute(\'src\', (jQuery(this).attr(\'src\')));
}
});