javascript - 加载主体后运行 jQuery

Question

一旦身体加载，我想运行一些 JS。我的框架从两个不同的静态文件加载页眉/页脚，而正文是动态的。因此在线阅读我可以将 $(elem).load(function()) 放在正文的末尾，并在页面加载时运行该函数？我简单地尝试了这个，但它似乎不起作用。

{%include file='/var/www/include/tpl/header.tpl'%}
<div id="contentMain">
        <h1>{%$heading%}</h1>
        {%if isset($Details)%}
                <h4>Details</h4>
                {%$Details%}
        {%/if%}
        {%$table%}
</div>
<div id="space">
&nbsp;
</div>
<script>
        $("#contentMain").load(function(){
                alert("It worked!");
                //run some stuff here
        });
</script>
{%include file='/var/www/include/tpl/footer.tpl'%}

任何有关如何使其工作的帮助将不胜感激！

Answer 1

jQuery 有一个方便的小功能，您可以将其附加到文档以在正文加载后运行功能。这是准备好的功能。

$(document).ready(function() {
    //Place code here to do stuff
});

这样做，您可以确保在函数内部的任何内容运行之前，主体及其所有内容已加载。

Answer 2

在您的情况下，由于脚本的位置，您不需要等待。该脚本不会被解析/执行，直到它上面的元素被解析。因此，可以安全地假设 contentMain div 及其后代已准备好进行操作。

{%include file='/var/www/include/tpl/header.tpl'%}
<div id="contentMain">
        <h1>{%$heading%}</h1>
        {%if isset($Details)%}
                <h4>Details</h4>
                {%$Details%}
        {%/if%}
        {%$table%}
</div>
<div id="space">
&nbsp;
</div>
<script>
    alert("It worked!");
    //run some stuff here
</script>
{%include file='/var/www/include/tpl/footer.tpl'%}

Answer 3

您可以使用 jquery 的 document.ready 来执行此操作。

在标题上，包括 jquery 参考。

<script type="text/javascript">
  $(document).ready(function() {
     alert("It worked!");
  });
</script>
</head>