Question

我为这个主题准备了一些演示示例。这里有页面名称“changelog.html”：

http://pantheon-studios.in/test/jquery/changelog.html

如果直接加载，这可以正常工作。

我正在尝试将此页面动态加载到：

http://pantheon-studios.in/test/jquery/index.html

此处changelog.html的行为与预期不符。

我认为在动态加载时，changelog.html上的init脚本没有被执行或者发生了其他事情。

同样明智的我还有其他几个使用各种jQuery和其他java脚本插件的页面。其中一些需要像上面的例子中的animatedcollapse.js那样进行初始化，而且其中几个不需要初始化，你可以直接调用脚本然后去。

我也尝试使用：

jQuery.getScript("anim.js")

动态加载“changelog.html”后却无效。

“anim.js”包含

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.init();

我真的很感激有人指出了正确的方向。我是网络编程的新手，所以请耐心等待我。

谢谢

Answer 1

我解决了你的问题

你的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>    
    <!-- Java Scripts -->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#clickme").click(function() { 
                $("#content").load("changelog.html");
            });
        });
    </script>
</head>

<body>
    <a href="javascript:void(0)" id="clickme">Load HTML</a>            
    <div>
        <div id="content"></div>
    </div>

</body>
</html>

您的changelog.html

    <script type="text/javascript" src="js/animatedcollapse.js"></script>
    <script type="text/javascript">

        animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
        animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
        animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');



    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
        //$: Access to jQuery
        //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
        //state: "block" or "none", depending on state
    };        
    animatedcollapse.init();    

    </script>    
    <!-- CSS Stylesheet -->
    <style type="text/css">
    .topicdetail{
    text-align:justify;
    width:650px;
    padding-left:10px;
    padding-right:10px;
    /*background: #BDF381;*/
    font-size: 13px;
    }
    </style>
    <div id="container">      
        <ul>
      <li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('cat')">?</a>
            <div id="cat" class='topicdetail'>

                <br/>
                <p>
                The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
                is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
                and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
                A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple 

commands. 
                </p>
                <br/>
            </div>
          </li>

          <li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('dog')">?</a>

          <div id="dog" class='topicdetail'>
                <br/>
                <p>
                The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
                is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
                and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
                A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple 

commands. 
                </p>
                <br/>
            </div>
          </li>

          <li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('rabbit')">?

</a>

          <div id="rabbit" class='topicdetail'>
                <br/>
                <p>
                The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
                is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
                and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
                A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple 

commands. 
                </p>
                <br/>
            </div>
          </li>
        </ul>    
    </div>

只需复制并粘贴html

即可

Answer 2

在changelog中的body标签上尝试onLoad事件处理程序，看看是否有助于解决问题。 IE

function init() {
    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
    animatedcollapse.init();
}

<body onload="init()">.... etc

或者将init（）添加到：

 onclick="jQuery('#content').load('changelog.html #container');init();return false"

使用Javascript在div中动态加载外部HTML

2 个答案: