两个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