加载Ajax分页的页面后,重新初始化其他JavaScript功能



歉意,这里是一个newb。如何加载其他插件,并让其他单独的脚本在加载AJAX生成的页面后功能?这是我的级码:

jQuery(document).ready(function($) {
var $mainContent = $("load-content"),
siteUrl = "http://" + top.location.host.toString(),
url = ''; 
$(document).delegate("a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", "click", function() {
if($.browser.msie){
var myie="/"+this.pathname;
location.hash = myie;
//alert(location.hash);
}else{
location.hash = this.pathname;
}
return false;
});

$("#searchform").submit(function(e) {
$search = $("#s").val();
$search = $.trim($search);
$search = $search.replace(/s+/g,'+');
location.hash = '?s='+$search;
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
url = url + " #content";
$('html, body, document').animate({scrollTop:0}, 'fast');
$mainContent.fadeOut(500, function(){$('#content').fadeOut(500, function(){
$("#loader").show();});}).load(url, function() {
$mainContent.fadeIn(500, function(){
$("#loader").hide(function(){ $('#content').fadeIn(500);});});});
});
$(window).trigger('hashchange');

});

页面上的嵌入式对象如何保留其功能?主要是使用JavaScript(例如

)的视频,幻灯片和其他媒体

视频JS(HTML5视频播放器)

vimeo

WordPress的投资组合幻灯片

加载ajax生成的标记时,它不会保留以前的功能。在上面的示例中,当DOM准备好采用DOM时,您正在初始化事物。为了确保执行AJAX请求后,要确保任何插件等都可以重新开始。

鉴于上面的代码示例,我建议一些重组。例如,您可以创建一个称为init的函数,您可以调用该函数以初始化某些插件:

function init () {
    $("#plugin-element").pluginName();
}
jQuery(document).ready(function () {
    // Initialise the plugin when the DOM is ready to be acted upon
    init();
});

然后遵循此内容,在您的成功回调中,您可以再次调用它,以重新定位插件:

// inside jQuery(document).ready(...)
$.ajax({
    type: 'GET',
    url: 'page-to-request.html',
    success: function (data, textStatus, jqXHR) {
        // Do something with your requested markup (data)
        $('#ajax-target').html(data);            
        // Reinitialise plugins:
        init();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        // Callback for when the request fails
    }
});

相关内容

最新更新