1
У меня ошибка 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>, ошибка исчезает, но мой плагин не работает. My 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>
не имеет смысла использовать noConflict внутри готового метода – epascarello
Пожалуйста, не заботиться о том, что один. Я пишу '$ (document) .ready (fucntion() {});' не загружается код javascript перед загрузкой DOM. –
В любом случае, я исправлю это, спасибо! @epascarello –