Javascript 如何保证在DOM完成后，在正文的中间运行一个脚本

在我的

中，我有一个组件，该组件插入一个脚本，该脚本应仅在所有页面完全加载后运行：

<script>
    $('<script id="smallPlacarScriptdId">\
$(window).load(function() {\
        $(".main.right").hide();\                                                 
        $("#rightzero").show();\
        $(".comp.smallPlacard.firstChild").click(function () {\
            var clicked = $(this).parent().attr("id");\
            $("main.right").hide();\
            $("#right"+clicked+"").show();\
        });\
})\
    <\script>').appendTo("body")
</script>

$('\
$（窗口）。加载（函数（）{\
$（“.main.right”）.hide（）；\
$（“#rightzero”）.show（）\
$（“.comp.smallplastic.firstChild”）。单击（函数（）{\
var clicked=$（this.parent（）.attr（“id”）\
$（“main.right”）.hide（）\
$（#右键+单击+）.show（）\
});\
})\
）。附于（“正文”）

这并没有发生，并且该脚本（1）已正确插入DOM，但（2）不起作用（既没有隐藏.main.right，也没有显示#rightzero）。 我认为通过使用这种方法，我可以保证它与将这个脚本放在

的底部是一样的，但事实并非如此。事实上，如果我把它（不是像这样动态地）放在我的页面中，它会产生期望的结果。

---

我尝试了

setTimeout（）

来验证我的理论，但我在jQuery中遇到了一个错误，我迷路了。

很抱歉，我没有很好地理解您的问题

Javascript将允许您访问未声明的变量，因此请利用它。检查是否设置了变量，undefined将被视为false，因此无需初始化。只要输入代码，就将其设置为true，这样就不会执行其他任何操作

希望这能为您解决问题，但您确实应该从服务器上看，避免使用javascript，它会使页面膨胀

<script>
    if (!myScriptHasLoaded)
    {
        myScriptHasLoaded = true;
        $(window).load(function() {
            $("main.right").hide();                                                 
            $("#rightzero").show();
            $(".comp.smallPlacard.firstChild").click(function () {
                var clicked = $(this).parent().attr("id");
                $("main.right").hide();
                $("#right"+clicked+"").show();
            });
        });
    }
</script>

如果（！myScriptHasLoaded）
{
myScriptHasLoaded=true；
$（窗口）。加载（函数（）{
$（“main.right”）.hide（）；
$（“#rightzero”）.show（）；
$（“.comp.smallplastic.firstChild”）。单击（函数（）{
var clicked=$（this.parent（）.attr（“id”）；
$（“main.right”）.hide（）；
$（#右键+单击+）.show（）；
});
});
}

只需使用此代码即可

<script id="smallPlacarScriptdId">
$(window).load(function() {
    $("main.right").hide();                                            
    $("#rightzero").show();
    $(".comp.smallPlacard.firstChild").click(function () {
        var clicked = $(this).parent().attr("id");
        $("main.right").hide();
        $("#right"+clicked+"").show();
    });
})
</script>

$（窗口）。加载（函数（）{
$（“main.right”）.hide（）；
$（“#rightzero”）.show（）；
$（“.comp.smallplastic.firstChild”）。单击（函数（）{
var clicked=$（this.parent（）.attr（“id”）；
$（“main.right”）.hide（）；
$（#右键+单击+）.show（）；
});
})

这可能是问题所在：

<\script>').appendTo("body")

”）。附录（“正文”）

浏览器可能认为您实际上正在关闭脚本标记。换成

</' + 'script>').appendTo("body")

”）。附录（“正文”）

---

检查此插销：

1。你所说的“不工作”是什么意思？它根本没有运行，或者它立即运行？2.什么是“jQuery中的错误”？3.您的代码中还有其他错误吗？我可以看到html解析器对这段代码做了大量修改。（提示

）@PaulRoub 1。它不会隐藏/显示元素。2.JQuery库本身中的“脚本意外结束”。3.我之所以要添加它，是因为我在同一个页面上插入了几个组件，我只想要一个脚本，而不是N个完全相同的脚本。通过以这种方式插入，我可以这样做：`if（document.getElementById（'smallPlacarScriptdId'））{}//仅在第一个组件实例上创建，以避免重复{\\my code here}`谢谢Vince。你说得对。顺便说一句，你对在一页中使用这个脚本20次的成本有什么想法？不优雅的一部分是否有真正的性能成本？啊，对不起，我在这方面有点盲目。让我看看是否能为您提供一些选择。页面大小将是最大的问题之一。执行脚本的多个版本会从一个执行点施加较小的负载。一次又一次地查找/替换脚本。您是对的，我对结束标记有问题，但无论哪种方式，在检查代码时，我都可以看到带有我的代码的结束标记和带有您的代码的标记。但仍然不起作用…我会这样做，但我正在使用Phoenix框架和服务器端组件…尽管如此，我还是会花几分钟的时间跟随您的领导，因为它确实与此相关。我再试几次就回来。谢谢刚刚用plunker链接再次更新了答案。请检查链接。是的！我知道它应该和你的代码一起工作。因此，我只是回到我的git中，在试图找到解决方案并使用以前的版本（非常复杂的页面：）时，清除潜在的错误，最终……工作！您是正确的（正如预期的那样），但是我的

.class.class.class.class

中有一个空格，它阻止了代码工作，并且没有错误，再次感谢您！你是对的。但我在上面解释了为什么在这个特殊的情况下我想要这个。非常感谢。