我正在使用Bootstrap Carousel功能。在页面的初始加载时，Carousel next / prev控件完美地工作，但是当我简单地重新加载页面时，这些控件不再响应点击，即使“自动”旋转我配置的幻灯片的时间间隔继续有效。
我已经做了很多研究试图解决这个问题..包括审查Bootstrap Carousel上可能有30多个stackoverflow帖子，但没有一个为我提供任何解决方案。经过两天研究这个问题，我仍然难过。
环境/设置：
$('#carousel-generic-example).carousel()类型语句的变体之外，没有特殊的JS。显然，无论是否有此语句，行为都没有变化）。 我有点疑惑为什么它在初始加载时正常工作，但在后续重载时没有。当我重新加载网页时，可能没有正确加载某些东西???也许在Rails中有一些导致这种行为的行为？
如果有人有任何理论可能会导致这种行为，我很乐意听到它（即使你没有时间深入研究代码）。或者，如果您对我可以解决此问题的方法有任何具体的想法。
我的解决方案中有很多相关的代码...而不是试图在这篇文章中复制和粘贴所有内容我认为与你“分享”它的最有效和最有效的方式是指向我代码所在的公共Github帐户，并提供项目中相关文件的映射。
首先，可以在我的Github帐户上找到完整的代码集：gitHub site 在这个项目中，您可以在这里找到相关的代码部分：
注1：你会在我的javascript文件中看到我正在使用$(window).load(function ()...和`$（document）.ready（function（）{'函数。我有承认我对这两个函数的作用有点模糊，而不是通常确保在javascript开始运行之前加载页面上的项目。我从主题中利用了我的模板的一部分，我注意到他们同时使用了这两个函数这些功能在他们的主题中，所以我不认为这是我的问题的原因...但我想我会参考它以防万一。
注2：我不确定它是否相关，但我也在使用Bootstrap Carousel的同一页面上使用另一个Carousel解决方案（caroufredsel）。我不认为有任何冲突，因为我借来的主题做了同样的事情......但我想我会提到它。
更新：我继续尝试解决我的问题（即，Bootstrap Carousel next / prev按钮不会提前拍摄图片）并偶然发现一些有趣的东西可能是修复我的问题的关键问题。具体来说
当我立即“关闭”$（document）.ready“语句时如下：
在我的javascript“app / assets / javascripts / jet.js”中，Bootstrap Carousel表现得像我期望的那样（上一个/下一个控制点击时的高级图像）。
不幸的是，进行更改会破坏网页底部的其他轮播功能（caroufredsel）（即，不是在caroufredsel中一次只显示3个元素，而是显示所有项目和控件caroufredsel然后不工作）。我真的需要在$（document）.ready功能中包装其他jQuery代码......但是当我执行Bootstrap prev / next控件时无法正常工作。
有人对这里发生了什么有什么建议以及如何解决这个问题？ 以下是jet.js文件的完整版本：
function scroll_to(clicked_link, nav_height) {
var element_class = clicked_link.attr('href').replace('#', '.');
var scroll_to = 0;
if(element_class != '.top-content') {
element_class += '-container';
scroll_to = $(element_class).offset().top - nav_height;
}
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 1000);
}
}
$(document).ready(function() {
// Bootstrap Carousel -- Tried each of the following lines but neither of them helped
// $('#carousel-generic-example').carousel()
// $('.carousel').carousel()
// $('#carousel-generic-example').carousel()});
// {
// 'prev'
// 'next'
// pause: true,
// interval: false,
// keyboard: true
// }
// jQuery('#carousel-generic-example').carousel();
// Pretty photo script
$("a[data-rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
social_tools: false,
hook: 'data-rel'
});
// ------------------------------------------------------------------------------------------
// Code below attempted to dynamically change glyphicons used on web page separator
// to avoid having to distinct CSS code for every separator (e.g., blog-separator, project-separator, etc)
// Unfortunately I couldn't get this to work...this code displays the character string
// for the blog glyphicon (i.e., e043) rather than the actual glyphicon. StackOverflow (http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery?lq=1) from Blazemonger (#3) suggest it may only work for strings (maybe not hex values)
// So I'm assuming i can't dynamically insert glyphicons.
// ------------------------------------------------------------------------------------------
// var regExp = /\#([a-z]+)/;
//
// $(".menu-items a").on('click', function () {
// var href = $(this).attr('href');
// var matches = regExp.exec(href);
// switch(matches[1]) {
// case "home":
// alert(href);
//
// break;
// case "about":
// alert(href);
// break;
// case "projects":
// alert(href);
// break;
// case "blog":
// $('.separator-line').attr('data-content', '\e043');
// // $(this).attr('data-content', '\e043');
// // $(".separator-line::after.content").attr('glyphicon-code',"\e043");
// var separatorCode = $(this).attr('data-content', '\e043').val();
// alert(separatorCode);
// break;
// case "contact":
// alert(href)
// break;
// }
// });
// -------------------------------------------------------------------------------
// Portfolio Javascript to load images
// var $container = $('.container');
//
// $container.imagesLoaded( function() {
// $container.masonry({
// itemSelector : '.post-box',
// columnWidth : '.post-box',
// transitionDuration : 0
// });
// });
$(".truncateIt").dotdotdot({
// configuration goes here
/* The text to add as ellipsis. */
ellipsis : '... ',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* Wrap-option fallback to 'letter' for long words */
fallbackToLetter: true,
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : 'a.next',
/* Whether to update the ellipsis: true/'window' */
watch : false,
/* Optionally set a max-height, if null, the height will be measured. */
height : 60,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function( isTruncated, orgContent ) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
// Scroll location for buttons on banner page
$('a.scroll-link').on('click', function(e) {
e.preventDefault();
scroll_to($(this), $('nav').outerHeight());
});
// Link and activate WOW.js
new WOW().init();
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
// Smooth scrolling logic
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
$(".cnbox").each(function () {
var nheight = $(this).find(".nbox").height();
$(this).find(".cbox").css("height", nheight + 50);
});
}); // /document.ready()
var caroufredsel = function () {
$('#caroufredsel-portfolio-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#portfolio-prev',
next: '#portfolio-next',
auto: {
play: false
}
});
$('#caroufredsel-blog-posts-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#blog-posts-prev',
next: '#blog-posts-next',
auto: {
play: false
}
});
};
// Isotope Portfolio
var $container = $('.portfolio-container');
var $blogcontainer = $('.posts-wrap');
var $filter = $('.portfolio-filter');
$(window).load(function () {
// Bootstrap Carousel -- Tried each of the following lines but neither of them helped
// jQuery('.carousel').carousel();
// jQuery('#carousel-generic-example').carousel();
caroufredsel();
// Initialize Isotope
$container.isotope({
itemSelector: '.portfolio-item-wrapper'
});
$blogcontainer.isotope({
itemSelector: '.article-wrap'
});
$('.portfolio-filter a').click(function () {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$filter.find('a').click(function () {
$filter.find('a').parent().removeClass('active');
$(this).parent().addClass('active');
});
});
$(window).smartresize(function () {
$container.isotope('reLayout');
$blogcontainer.isotope('reLayout');
});
$(window).resize(function () {
caroufredsel();
});
干杯。
答案 0 :(得分：1)
经过多次反复试验后，我通过反复试验找到了解决方案。事实证明$(document).ready(function() {必须在平滑滚动逻辑（即以});开头的代码）之前关闭（即$('a[href*=#]:not([href=#])').click(function() {。）
我不完全确定为什么必须在那里放置“关闭”而不是在平滑滚动逻辑之后。
如果有人有解释我很想听到为什么......正如我所提到的，我在很大程度上通过反复试验找到了解决方案。
答案 1 :(得分：0)
Bootstrap通常需要一个JQuery文件来克服这个错误。因此，最好将其嵌入到您的文件中，并在线上工作。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>