把Jquery脚本标记

我得到了错误Uncaught TypeError: $(...).popover is not a function在show.html.erb。 Popover在我的导航栏中，并且show.html.erb有jquery插件（bxslider）。我把我的脚本标签<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>我的show.html.erb像头，把Jquery脚本标记

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <!-- bxSlider Javascript file --> 
    <script src="/js/jquery.bxslider.min.js"></script> 
    <!-- bxSlider CSS file --> 
    <link href="/css/jquery.bxslider.css" rel="stylesheet" /> 
</head>

当我删除<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>，错误消失，但我的插件不工作。我的popover在其他页面中运行良好，我的插件看起来像这样。这是在我的底部show.html.erb。

<script> 

    var $j = jQuery.noConflict(); 

    var realSlider= $j("ul#bxslider").bxSlider({ 
     speed:1000, 
     pager:false, 
     controls: true, 
     nextText:'<span></span>', 
     prevText:'<span></span>', 
     infiniteLoop:true, 
     captions: true, 
     onSlideBefore:function($slideElement, oldIndex, newIndex){ 
      changeRealThumb(realThumbSlider,newIndex); 

     } 

     }); 

     var realThumbSlider=$j("ul#bxslider-pager").bxSlider({ 
     minSlides: 8, 
     maxSlides: 8, 
     slideWidth: 100, 
     slideMargin: 12, 
     moveSlides: 1, 
     pager:false, 
     speed:1000, 
     controls: true, 
     infiniteLoop:false, 
     hideControlOnEnd:true, 
     nextText:'<span></span>', 
     prevText:'<span></span>', 
     onSlideBefore:function($slideElement, oldIndex, newIndex){ 

     } 
     }); 

     linkRealSliders(realSlider,realThumbSlider); 

     if($j("#bxslider-pager li").length<5){ 
     $j("#bxslider-pager .bx-next").hide(); 
     } 

// sincronizza sliders realizzazioni 
    function linkRealSliders(bigS,thumbS){ 

    $j("ul#bxslider-pager").on("click","a",function(event){ 
     event.preventDefault(); 
     var newIndex=$j(this).parent().attr("data-slideIndex"); 
      bigS.goToSlide(newIndex); 
    }); 
    } 

//slider!=$thumbSlider. slider is the realslider 
    function changeRealThumb(slider,newIndex){ 

    var $thumbS=$j("#bxslider-pager"); 
    $thumbS.find('.active').removeClass("active"); 
    $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active"); 

    if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex); 
    else slider.goToSlide(slider.getSlideCount()-4); 

    } 
</script>

来源

2015-12-15 Changnam Hong

是没有意义的使用noConflict一个现成的方法里面 – epascarello

请不要在乎那一。我编写'$（document）.ready（fucntion（）{}）;'在DOM加载之前不要加载JavaScript代码。 –

无论如何我修复它，谢谢！ @epascarello –

首先是把所有的你的js文件导入到应用程序/资产/样式应用程序/资产/ JavaScript和CSS

更改文件在您的路径：

<script src="/js/jquery.bxslider.min.js"></script> 
    <!-- bxSlider CSS file --> 
    <link href="/css/jquery.bxslider.css" rel="stylesheet" />

到

<script src="/assets/jquery.bxslider.min.js"></script> 
    <!-- bxSlider CSS file --> 
    <link href="/assets/jquery.bxslider.css" rel="stylesheet" />

或者您也可以将这些文件包含到application.js和application.css.scss中，如下所示：

中的application.js文件

//= require jquery.bxslider.min.js

和application.css.scss文件

：

*= require jquery.bxslider

来源

2015-12-15 15:07:47

是否有任何理由这样做？我认为使用'Public'是更好的方法，但不知道为什么。 –

我阅读[资产管道指南]（http://guides.rubyonrails.org/asset_pipeline.html）并理解你的意思。但我仍然有同样的问题。 @Jai Kumar Rajput –

好吧，试着改变脚本标签的顺序，希望它能为你工作。有些时候我遇到了同样的问题，我通过改变顺序解决了问题。 –

把Jquery脚本标记

回答

相关问题