0

<head>タグの最初にjsファイルを動的に追加したい。私のファイルは以下のとおりです

例のリンク :リンク

コード 

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
        function load() {
        var doc = document;
        var url = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
        var id =  1;
        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.id = id;
        //alert(script);
        var head = doc.getElementsByTagName( "head" )[ 0 ].appendChild( script );

        }
         window.onload = load;

        </script>   
<title>Nathan</title>
<style>
table{
    width:200px;
    margin:0 auto;
    background-color:#eee;
    text-align:center;
    cursor:pointer;
}
th{
    background-color:#333;
    color:#FFF;
}
div#lyrics{
    width:200px;
    height:400px;
    background-color:#7C8698;
    position:absolute;
    left:500px;
    padding:10px;

}
</style>
<script type="text/javascript">

$(document).ready(function(){

    $("div#lyrics").hide();

    $("#songlist tr").mouseover(function(){
        $(this).css("background-color","#ccc");
        $("#lyrics",this).show();
    }).mouseout(function(){
        $(this).css("background-color","#eee");
        $("#lyrics",this).hide();
    });

});
</script>

</head>

<body>
    <table id="songlist">
        <th>Songs</th>
        <tr><td>song1<div id="lyrics">la la la song1</div></td></tr>
        <tr><td>song2<div id="lyrics">doo doo doo song2</div></td></tr>
        <tr><td>song3<div id="lyrics">fee fi fo fum song3</div></td></tr>
        <tr><td>song4<div id="lyrics">hmm hmmm song 4</div></td></tr>
        <tr><td>song5<div id="lyrics">ma ma mi mi song5</div></td></tr>
        </tr>
    </table>
</body>
</html>

動的スクリプトは正常に追加されましたが、head タグの最後に追加されました。私のjquery関数が機能していません。ヘッドタグの最初に動的スクリプトをロードする方法を教えてください

4

3 に答える 3

3

最初に jQuery を head セクションに追加しても機能しません。ソース ファイルへのリクエストが非同期になるため、通常のスクリプト タグのように jQuery を追加しないでください。

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script>/*jQuery dependent code*/</script>
  ...

非同期ロードを使用する/使用する必要がある場合は、スクリプトがロードされるのを待ってから、jQuery 依存コードを追加する必要があります。

<script> // Pseudo code: (Take a look at http://www.ejeliot.com/blog/109 for more complex solution)
  var script = document.createElement('script');
  script.onload = init;
  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js';
  document.body.appendChild(script);
</script>

<script>
  function init() { /* now jQuery is loaded */ }
</script>
于 2013-07-30T08:42:21.150 に答える