使用 ajax 分页加载页面后重新初始化其他 javascript 函数

Posted

技术标签:

【中文标题】使用 ajax 分页加载页面后重新初始化其他 javascript 函数【英文标题】:reinitialize other javascript functions after loading a page with ajax pagination 【发布时间】:2012-10-30 13:16:37 【问题描述】:

抱歉,这里是个新手。如何加载其他插件,并在加载 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 之类的媒体

video js (html5 video player)

vimeo

portfolio slideshow for wordpress

【问题讨论】:

【参考方案1】:

当您加载 ajax 生成的标记时,它不会保留以前的功能。在上面的示例中,当 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();
);

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

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

【讨论】:

我找到的关于这个主题的最佳答案。谢谢。重新初始化会导致明显的性能问题吗? 我也很好奇性能问题。我正在开发一个播放器,它会在每个新页面加载时检查播放列表。它用每一页更新数组。不知何故,我无法让我的 plugin.pagePlaylist() 工作。当我使用 init();包含相同 pagePlaylist() 的函数...我宁愿只调用 pagePlaylist()。 @TimNguyenBSM,不,不会有性能问题。此外,如果是这样,在没有插件初始化的情况下加载 ajax 内容是幼稚和荒谬的。

以上是关于使用 ajax 分页加载页面后重新初始化其他 javascript 函数的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Ajax 加载过滤后的数据,而无需在 laravel 中重新加载整个页面

jquery mobile listview使用ajax动态加载后,跳转到其他页面返回时数据没有保存如何解决?

Rails 控制器方法在 Ajax 调用后不重新加载页面

AJAX请求页面未重新渲染后

关键词搜索&分页功能的前端代码(ajax + jQuery)

IE 8 在使用 jQuery BBQ 重新加载页面时显示原始 ajax 响应