0

如何在 ajax 加载的页面中运行脚本？

当您使用 jquery.load 时，所有脚本代码都被删除的事实真的很烦人。我正在尝试使用 AJAX，所以我不需要重新加载整个页面。

脚本，目前：

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a, #nav-top li a, #nav-left li a, #nav-right li a').not('.scroll').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-4)){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad)  
    }                                           
});



$('#nav li a, #nav-top li a, #nav-left li a, #nav-right li a').not('.scroll').click(function(){  

    var toLoad = $(this).attr('href')+' #content>*';  // there must be a blank space in ' #content>*'
    $('#content').hide(888,loadContent);  
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn(888);
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())  
    }
    function showNewContent() {
        $('#content').show(888,hideLoader());  
    }
    function hideLoader() {
        $('#load').fadeOut(888);
    }

    return false;

});

});

工作演示示例页面在这里：

http://www.ideagasms.net/index2 （只需单击“主页”和“关于”链接即可查看它的实际效果。）

我将所有的 jquery 放在三个缩小的文件中；它们包括 php/jquery 购物车、lazyload、灯箱等。我希望我的所有三个主要 js 文件都“保持活力”，这样，当我添加例如“添加到购物车”按钮或 img.lazyload 到 #content div 时，这些东西仍然会起作用。

我听说 livequery 插件是一个不错的解决方案，但它超出了我的想象，对我来说这似乎可能有点矫枉过正。

必须有一种方法可以修改上述脚本以包含 one.min.js、two.min.js 和 three.min.js，从而“重新触发”它们以使它们保持活动状态。

如果这个问题很重要，我愿意雇用任何能解决这个问题的人。然后我可以在这里重新发布解决方案。（我问的这个问题已经被问遍了，包括我得到上述“使用 jquery 加载和动画内容”脚本的主要 nettuts 页面，尽管有些人已经设法修复，但该解决方案仍然避开了大多数人这个，我不知道如何实施他们的解决方案。谁能一劳永逸地解决这个问题，将一次性帮助数百名沮丧的人。你使用 nettuts 教程建立了一个全新的网站，只发现一个星期对加载具有关联脚本的内容没有好处的工作......这真是令人沮丧。）

4

2 回答 2

0

试试这个（在黑暗中拍摄）。

$('body').on('click', '#nav li a, #nav-top li a, #nav-left li a, #nav-right li a', function() {
    if (this.hasClass('scroll')) { return; }

    var toLoad = $(this).attr('href') + ' #content>*'; // there must be a blank space in ' #content>*'
    $('#content').hide(888, loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn(888);
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 4);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())
    }

    function showNewContent() {
        $('#content').show(888, hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut(888);
    }

    return false;

});​
于 2012-09-28T02:08:26.793 回答
0

理论上，如果您的页面格式正确，则无需从 Ajax 调用中检索 JS 代码。Ajax 调用用于返回数据（例如JSON、XML或其他类型的数据或特定区域的一段HTML ）。

您应该将 JS 脚本放在第一个加载的页面中。

如果您确实需要加载一些脚本，您可以创建新的脚本节点并将它们放在 DOM 文档的开头（假设您的 Ajax 响应数据包含要加载的好 JS 脚本的路径）。

于 2012-09-28T04:18:27.723 回答