使用Ajax的分页加载一个页面后,重新初始化其他JavaScript功能分页、初始化、加载、页面

2023-09-10 19:15:16 作者:疯子有疯子的快乐//*

抱歉,这里一共有福利局。我怎么可以加载其他插件,并让其他不同的脚本函数加载生成AJAX页面后?这是我的个当前code:

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

组合幻灯片字preSS

推荐答案

在加载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.

由于您的code以上的样品,我建议一个小调整。例如,您可以创建一个名为函数的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
    }
});