Question

如何在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，lightbox等等。我希望我的所有三个主要js文件都“保持活着”，这样，当我添加一个“添加到购物车”按钮或img.lazyload到#content div时，这些东西仍然会起作用。 / p>

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

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

如果这个问题很重要，我愿意雇用谁能解决这个问题。然后我可以在这里重新发布解决方案。（我问的这个问题已经被问到了整个地方，包括主要的nettuts页面，我得到了上面的“使用jquery加载和动画内容”脚本，并且该解决方案仍然避开了大多数人，尽管有些人设法解决了这一点，我无法弄清楚如何实现他们的解决方案。谁能一劳永逸地解决这个问题，一次性帮助数百名沮丧的人。你使用nettuts教程建立一个全新的网站，只发现一周进入工作，加载具有相关脚本的内容是没有用的......这真令人沮丧。）

Answer 1

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

$('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;

});

Answer 2

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

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

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

在由ajax加载的页面中运行脚本

2 个答案: