我最近将我的网站升级到Bootstrap 3,并且正在通过所有布局来更新类名和各种功能以正常工作.我最近的问题是,下拉菜单似乎不起作用.起初我以为我没有正确地为我的导航栏实施代码,但是在沮丧之后,我实际上试图摆脱我的导航栏,并使用直接从
BS 3 documentation的一个代码.即使代码不起作用.我已经研究了这一点,我相当肯定我已经加载了所有正确的.js库.这是我的application.js：
//= require jquery //= require bootstrap-sprockets //= require jquery.ui.datepicker //= require jquery.timepicker.js //= require jquery_ujs //= require turbolinks //= require bootstrap //= require jquery.remotipart //= require chosen-jquery //= require_tree .
以下是我的< head>：
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.timepicker.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.iframe-transport.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.remotipart.js?body=1"></script>
而且我在同一页面上有popovers和其他可折叠的项目,所有的工作都很好,所以我相当肯定所有的.js都是巧妙的.
我在其他地方阅读过,可能会引发Bootstrap 3的问题,甚至尝试(然后放弃并恢复)jquery.turbolinks的gem,无济于事.不用说,我不知道如何在jsfiddle上重现这个(对不起).
最后,我已经验证,每次单击一个下拉列表时,都会调用以下四个js函数,大概按以下顺序：
的jquery.js：4306
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply( eventHandle.elem,arguments ) :
undefined;
};
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
eventHandle.elem = elem;
turbolinks.js：324
installClickHandlerLast = function(event) {
if (!event.defaultPrevented) {
document.removeEventListener('click',handleClick,false);
return document.addEventListener('click',false);
}
};
tujquery.js：4306(再次)
turbolinks.js：324
handleClick = function(event) {
var link;
if (!event.defaultPrevented) {
link = extractLink(event);
if (link.nodeName === 'A' && !ignoreClick(event,link)) {
visit(link.href);
return event.preventDefault();
}
}
};
任何线索可能发生在这里和如何解决它？
解决方法
无需使用jquery-turbolinks即可解决此问题.你需要先了解为什么会发生这种情况.当启用turbolinks并单击链接时,页面：更改事件被触发,所有JavaScript都从新加载的html重新评估.
这包括在application.js中加载的引导JavaScript代码.当bootstrap的javascript被重新加载时,它会中断.您可以通过在application.js< script>中使用data-turbolinks-eval = false来解决此问题.标签.
对于再培训局：
<%= javascript_include_tag 'application','data-turbolinks-eval' => false %> <%= javascript_include_tag params[:controller] %>
对于SLIM：
== javascript_include_tag 'application','data-turbolinks-eval': false == javascript_include_tag params[:controller]
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
