兩個jQuery腳本在同一頁上發生衝突

Question

我在將兩個jQuery腳本放在同一頁上時遇到問題，我該怎麼辦？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.slidepanel.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('[data-slidepanel]').slidepanel({ 
      orientation: 'left', 
      mode: 'push' 
     }); 
    }); 

</script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquery.mixitup.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#Grid').mixitup(); 
    }); 
</script> 

我知道jQuery.noConflict（）可以解決這個問題，但我不知道如何將它應用到這一點。任何幫助？

Answer 1

1. 您只需要jQuery的一個副本，如同每個人都在說的那樣。建議您使用Google CDN，正如解釋here所述。

2. 如果它仍然無法正常工作，請單獨嘗試每個代碼元素。因此請重新格式化您的代碼。您會注意到我爲其中一個腳本添加了type="text/javascript"。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.slidepanel.js"></script> 
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 

<script type="text/javascript"> 
    (function($){ // Self-executing wrapper that sets $=jQuery 
     $(function() { // Fires onload 
      $('[data-slidepanel]').slidepanel({ 
       orientation: 'left', 
       mode: 'push' 
      }); 
      $('#Grid').mixitup(); 
     }); 
    }(jQuery)); 
</script> 

然後嘗試註釋掉兩個$('...報表，看看一個或兩個的工作。

Answer 2

爲什麼你還需要兩個jQuery庫？只要使用新的！ ...讓我們甚至說你需要一箇舊的，因爲你需要一些在新框架中不可用的功能。只需在搜索模式下查看它們，並將它們逐一複製到新框架中（只能在像我這樣離線使用jQuery的情況下完成，這樣可以節省開發過程中的加載時間，從而緩存它。） PS：我希望這樣做不會導致任何版權問題：/

Answer 3

刪除舊的和使用此版本http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js Rmove舊版本一樣 jQuery的1.5.2.js和jQuery的1.9.1.min.js