Question

我使用从互联网下载的主题，这个主题使用Bootstrap和jQuery，一切正常，直到我尝试添加外部jQuery库来制作高级HTML选择列表。

我尝试使用很多，但让我们以此为例： https://select2.github.io/

我试图将CSS和JS文件正常包含在我的代码中

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>

并开始激活和使用脚本，但看起来并不像它一样。

以下是我的默认标头包含的内容：

    <link href="css/flags/famfamfam-flags.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/themecss/revolution-slider.css" rel="stylesheet">    
    <link href="css/themecss/lightbox.css" rel="stylesheet">     
    <link href="css/themecss/animate.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link href="css/colors/color-default.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

这就是我的foorter所包含的内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/themejs/jquery.smartmenus.js" type="text/javascript"></script>
<script src="js/themejs/jquery.stellar.js" type="text/javascript"></script>
<script src="js/themejs/SmoothScroll.js" type="text/javascript"></script>
<script src="js/themejs/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/themejs/jquery.lightbox.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/themejs/jquery.montage.min.js"></script>
<script type="text/javascript" src="js/themejs/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="js/revolutionjs/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/revolutionjs/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/themejs/jquery.flexslider.js"></script>
<script src="js/themejs/jquery.easypiechart.min.js"></script>
<script src="js/themejs/jquery.tooltipster.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<script type="text/javascript" src="js/themejs/TimeCircles.js"></script>
<script src="js/themejs/tweetie.js" type="text/javascript"></script>
<script src="js/themejs/jquery.nouislider.min.js" type="text/javascript"></script>
<script src="js/themejs/application.js"></script>

无论我在哪里尝试将新的CSS include和JS包含在页眉和页脚中它都不想工作，当我想通过jQuery代码激活它时：

<script type="text/javascript">
  $('select').select2();
</script>

我需要你的帮助才能使这些外部库适用于这些现成的主题。我真的不知道这是什么问题。

我已准备好提供与我的主题或结构相关的任何其他信息。

提前谢谢你们：）

Answer 1

我认为你需要等待dom准备就绪：

<script type="text/javascript">
  $(function() {
    $('select').select2();
  });
</script>

Answer 2

尝试这样的包含::

<link href="css/flags/famfamfam-flags.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href="css/themecss/revolution-slider.css" rel="stylesheet">    
<link href="css/themecss/lightbox.css" rel="stylesheet">     
<link href="css/themecss/animate.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/colors/color-default.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/themejs/jquery.smartmenus.js" type="text/javascript"></script>
<script src="js/themejs/jquery.stellar.js" type="text/javascript"></script>
<script src="js/themejs/SmoothScroll.js" type="text/javascript"></script>
<script src="js/themejs/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/themejs/jquery.lightbox.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/themejs/jquery.montage.min.js"></script>
<script type="text/javascript" src="js/themejs/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" src="js/themejs/helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="js/revolutionjs/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/revolutionjs/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/themejs/jquery.flexslider.js"></script>
<script src="js/themejs/jquery.easypiechart.min.js"></script>
<script src="js/themejs/jquery.tooltipster.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<script type="text/javascript" src="js/themejs/TimeCircles.js"></script>
<script src="js/themejs/tweetie.js" type="text/javascript"></script>
<script src="js/themejs/jquery.nouislider.min.js" type="text/javascript"></script>
<script src="js/themejs/application.js"></script>

不要忘记等到dom准备好调用函数，如：

<script type="text/javascript">
  $(function() { //wait till dom is ready
    $('select').select2(); //then call code
  });
</script>

如果在本地进行测试，请确保将http:或https:放在每个外部链接前面，如上所述。在本地运行时，无协议链接（那些没有该部分的链接）将不起作用。您应该在控制台中收到错误，就像现在一样：

enter image description here

此外，您正在使用的其中一个库正在覆盖$，因此它不再是jQuery的别名，请参阅http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

快速解决方法是使用较长的jQuery而不是$别名：

jQuery(function() { 
    jQuery('select').select2();
});

如果是我，我尝试保护其他库不会覆盖$，因为我（和大多数其他人）已经习惯$等于jQuery，类似于这真的会让我烦恼。

使用Bootstrap主题 - 添加jQuery外部库

2 个答案: