當動態地包含jQuery時，腳本不起作用

我有一個腳本，我試圖修改，以便我不加載jQuery庫，如果它已經存在。然而，我可以讓事情發揮作用的唯一方法是下面的示例1（明確加載jQuery庫）。當我嘗試有條件地加載它，滑塊不工作...當動態地包含jQuery時，腳本不起作用

示例＃1 - 滑塊在這個例子中工作正常（但jQuery的可加載多次）

<head> 
    <script type='text/javascript' src='scripts/js/jquery-1.4.2.min.js'></script> 
    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script> 
    <script type='text/javascript'> 
     jQuery(document).ready(
      function(){ 
       jQuery('#accordion-1').slider({ 
        autoStart:true, 
        slideInterval:5000, 
        slideNum:false 
       }); 
      }) 
    </script> 
</head>

示例＃2 - 試圖動態加載jQuery。滑塊不起作用。

<head> 
    <script type='text/javascript'> 
     if (typeof jQuery == 'undefined') { 
      // jQuery is not loaded => load it: 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'; 
      document.getElementsByTagName('body')[0].appendChild(script); 
     } 
    </script> 

    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script> 
    <script type='text/javascript'> 
     jQuery(document).ready(
      function(){ 
       jQuery('#accordion-1').slider({ 
        autoStart:true, 
        slideInterval:5000, 
        slideNum:false 
       }); 
      }) 
    </script> 
</head>

示例＃3 - 這不工作，要麼...

<head> 
    <script type="text/javascript"> 
     if (typeof jQuery == 'undefined') { 
      document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E')); 
     } 
    </script> 
    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script> 
</head>

來源

2011-07-15 Scott B

您必須基本上等待腳本加載。請看下面的代碼。

<script type='text/javascript'> 
     function initSlider(){ 
      jQuery(document).ready(
      function(){ 
       jQuery('#accordion-1').slider({ 
        autoStart:true, 
        slideInterval:5000, 
        slideNum:false 
       }); 
      }) 
     } 
     if (typeof jQuery == 'undefined') { 
      // jQuery is not loaded => load it: 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'; 
      script.onreadystatechange= function() {//This is for IE 
       if (this.readyState == 'complete'){ initSlider(); }; 
      } 
      script.onload= initSlider;//This is for Non-IE 
      document.getElementsByTagName('body')[0].appendChild(script); 
     } 
    </script>

來源

2011-07-15 17:12:30 ShankarSangoli

感謝Shankar，這很有道理。 –

我不認爲這是一個工作的答案，因爲據我所知，你不應該使用「script.onload」你應該真的使用script.addEventListener（'load'，initSlider，false）;我很確定你正在尋找的readyState是'加載'而不是'完成'。此外，我們是不是在尋找返回readyState的數字值，在這種情況下，2代表'loaded'，4代表'complete？'。 – Tomas

而是嘗試：

var script = document.createElement("script"); 

script.type = "text/javascript"; 
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"; 

document.body.appendChild(script);

來源

2011-07-15 16:42:15

document.getElementsByTagName('body')[0].appendChild(script);

已經加入你的身體元素之前，將無法正常工作到DOM。儘量只：

<script type="text/javascript"> 
     if(!window.jQuery) 
      document.write('<script src="jquery.js.php"><\/script>'); 
    </script>

來源

2011-07-15 16:42:55 Paulpro

的問題是，你追加jQuery腳本到body結束。這是之後script使用jQuery的元素。這顯然不會起作用，因爲腳本是按順序評估的。

您應該使用document.write，而不是（在少數情況下，這是正確的一個）：

document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));

的unescape代碼是迴避的事實是，如果直接插入到JavaScript </script>會導致錯誤的簡單方法。

此代碼將script標記正確插入文檔的當前位置。（信貸到this SO answer。）

來源

2011-07-15 16:45:10 lonesomeday

謝謝，但它仍然無法正常工作。看到我更新的問題（例3） –

當動態地包含jQuery時，腳本不起作用

回答

相關問題