使用JQuery选项卡加载的文件中的JQuery


JQuery in files loaded using JQuery tabs

这是我第一次尝试使用JQuery选项卡。我有一个简单的文件,当点击选项卡时,它会加载另外3个php文件。

<div id="info">
    <ul id="info-nav">
        <li><a href="tab1.php">Tab 1</a></li>
        <li><a href="tab2.php">Tab 2</a></li>
        <li><a href="tab3.php">Tab 3</a></li>
    </ul>
</div>    
<script type="text/javascript">
    $(document).ready(function(){
        $('#info').tabs();
    });
</script>

php文件也使用JQuery,并且加载正确。当我单独测试这些文件时,JQuery部分可以正常工作。但是一旦它们被加载到选项卡中,JQuery就不起作用了。即使是加载文件中的$(document).ready(function()…)中的一个简单警报也不会显示。两个文件中的JQuery之间是否存在冲突?谢谢你的帮助。

本身没有冲突,但有两件事正在发生:

  • 浏览器拒绝执行<脚本>动态加载的内容中的标签
  • 浏览器正在执行<脚本>标记,但在动态加载内容时不会在文档对象上触发ready事件

第二种几乎可以肯定是正确的;第一个也可以是

要找出正在发生的情况,不要将alert()放在$(document).ready()回调中,而是将其简单地放在<脚本>标记,然后重新加载并选择动态加载该HTML文件的选项卡。在上述第一种情况下(完全没有执行<脚本>标记),将不显示警报;在第二种情况下(就绪事件未启动),它会。

如果代码正在执行,那么您所需要做的就是将代码从回调中取出,并将其封装在bare<脚本>标签;它将在浏览器看到它时立即执行。否则——出于可维护性的原因,我建议在任何情况下这都是可取的——你需要重新设计你的应用程序,使其不依赖于执行随机<脚本>标签分散在各种HTML文件中,但使用一些统一的处理程序来处理加载标签内容时需要做的任何事情。