把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腳本標記

回答

相關問題