.load() 之后 jQuery 脚本不起作用答案

【问题标题】：jQuery script not working after .load().load() 之后 jQuery 脚本不起作用
【发布时间】：2013-12-30 14:08:15
【问题描述】：

我有 4 个页面通过加载“合并”为一个 (index.html)：

<!-- !!!! Files includes !!!! -->
<script language="JavaScript" type="text/javascript"> 
$(function(){
$("#included1").load("aaa.html");
$("#included2").load("bbb.html");
$("#included3").load("ccc.html");
$("#included4").load("ddd.html");
});
</script>

并显示在这里：

<div id="content">
<section><br>
<div id="included1"></div>
</section>
<section><br>
<div id="included2"></div>
</section>
<section><br>
<div id="included3"></div>
</section>
<section><br>
<div id="included4"></div>
</section>
</div>  <!-- end of content // text below menu-->

不幸的是，由于某些服务器限制以及这 4 个页面是由脚本在不同时间生成的事实，它必须这样做。

每个页面的内部代码都有许多带有长文本的块，可以在某些操作中隐藏/显示。它看起来像这样：

<div class="error">
<div class="more">[... more]</div>
<div id="edetails" class="content small">
Error code///Error code///Error code///Error code///Error code///Error code///
Error code///Error code///Error code///Error code///Error code///Error code///
Error code///Error code///Error code///Error code///Error code///Error code///
</div>
</div><!-- end of error -->

为此我使用这个：

<script type="text/javascript"> 
$(window).load(function(){
$('.more').click(function () {
    if($(this).html()=="[... more]") {  
            $(this).html("[... less]");
            $(this).next('#edetails').removeClass('small');
            $(this).next('#edetails').addClass('normal');
    } else {  
            $(this).html("[... more]");
            $(this).next('#edetails').removeClass('normal');
            $(this).next('#edetails').addClass('small');
        };
});
});
</script>

如果我在每个页面上保留该代码，然后打开该页面（例如 aaa.html，而不是 index.html） - 它就可以正常工作。

如果我打开 index.html - 它根本不起作用。

所以...由于我将该代码标记为 index.html 4 次，因此我决定将其移动一次以进行索引并将其保存在 <head> 中 - 实际上，当我打开该页面时在我的服务器上 - 显示/隐藏功能根本不起作用。

但是当我将 index.html 保存到我的硬盘驱动器并在浏览器中打开它时 - 它可以正常工作。

我不知道发生了什么...有什么想法吗？

【问题讨论】：

$(window).load 在异步 $('#included').load 完成之前被触发？尝试使用$('#included').load()的complete参数

标签： javascript jquery merge

【解决方案1】：

这里的棘手部分是jQuery.load() 是异步的。您需要同步您的调用，以便能够在正确的时间运行您的脚本。为此，我建议使用jQuery.Deferred：

$(document).ready(function() {
    function deferredLoad(target, url) {
        return $.Deferred(function(deferred) {
            $(target).load(url, function() {
                deferred.resolve();
            });
        }).promise();
    }

    var loadPromises = [];

    loadPromises.push(deferredLoad('#included1', 'aaa.html'));
    loadPromises.push(deferredLoad('#included2', 'bbb.html'));
    loadPromises.push(deferredLoad('#included3', 'ccc.html'));
    loadPromises.push(deferredLoad('#included4', 'ddd.html'));

    $.when.apply(null, loadPromises).done(function() {
        $('.more').click(function () {
            if($(this).html() == "[... more]") {  
                $(this).html("[... less]");
                $(this).next('#edetails').removeClass('small');
                $(this).next('#edetails').addClass('normal');
            } else {  
                $(this).html("[... more]");
                $(this).next('#edetails').removeClass('normal');
                $(this).next('#edetails').addClass('small');
            };
        });
    });
});

这样，您的脚本将在所有加载操作完成后运行。

【讨论】：

不幸的是，我似乎不知道如何使用它。我在 jQuery 实现之后将该代码放在
@BlackHat 我会重新检查是否有任何拼写错误，请告诉我您使用的是哪个版本的 jQuery？
它是 jQuery v1.10.2；但是 - 首先，我是否放置了正确的代码？
@BlackHat 您选择的地点是正确的地点之一 - 您的控制台中是否有任何 JavaScript 错误？
@BlackHat 我已经更新了答案，将所有内容包装到 $(document).ready() 事件中，只需确保 DOM 已准备好。请立即测试。