使用ajax分页加载页面后重新初始化其他javascript函数 [英] reinitialize other javascript functions after loading a page with ajax pagination

问题描述

抱歉，这里是个新手.如何加载其他插件，并在加载 ajax 生成的页面后让其他单独的脚本运行?这是我当前的代码:

Apologies, a total newb here. How can I load other plugins, and let other separate scripts function after loading an ajax generated page? This is my curent code:

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 的媒体，如

How can embedded objects on pages retain their functionality? Mainly videos, slideshows and other media that use javascript like

视频js(html5视频播放器)

vimeo

和

wordpress 的作品集幻灯片

推荐答案

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

When you load ajax-generated markup it will not retain the functionality it had before. In your example above, you're initialising things when the DOM is ready to be acted upon. In order to make sure any plugins, etc, are running after you perform the ajax request you need to reinitialise them.

鉴于您上面的代码示例，我建议您进行一些重组.例如，您可以创建一个名为 init 的函数，您可以调用它来初始化某些插件:

Given your code sample above, I'd recommend a little restructuring. For example, you could create a function called init which you could call to initialise certain plugins:

function init () {
    $("#plugin-element").pluginName();
}

jQuery(document).ready(function () {
    // Initialise the plugin when the DOM is ready to be acted upon
    init();
});

然后，在您的ajax请求成功回调时，您可以再次调用它，这将重新初始化插件:

And then following this, on the success callback of you ajax request, you can call it again which will reinitialise the plugins:

// 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
    }
});

这篇关于使用ajax分页加载页面后重新初始化其他javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！