我在使用 bootstrap-sass 和 bootstrap-multiselect 时遇到了一个奇怪的问题。 似乎 bootstrap-sass 事件处理程序阻止了下拉列表等的多选处理程序。
这个包是通过 bower 安装的:
'bootstrap-sass-official#3.3.1',
'bootstrap-multiselect'
基于django和python构建的应用程序,因此将脚本绑定(bind)到页面的模板:
{% compress js %}
<script src="{% static 'jquery/dist/jquery.js' %}"></script>
<script src="{% static 'bootstrap-sass/assets/javascripts/bootstrap.js' %}"></script>
{% endcompress %}
特定页面上的绑定(bind)脚本使用:
{% block extrajs %}
<script src="{{ STATIC_URL }}bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"
type="text/javascript" charset="utf-8"></script>
{% endblock %}
创建多选控件:
$('.multiselect').multiselect()
没什么特别的。但是当我尝试在 UI 上使用多选控件时,它不会下拉。控制台中没有错误。
浏览代码后,我发现有一些事件处理程序阻止了多选处理程序的执行:
// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
因此,棘手的解决方案是首先在使用多选的页面上关闭标准事件处理程序:
$(document)
.off('click.bs.dropdown.data-api')
.off('keydown.bs.dropdown.data-api')
这似乎有点老套,对我来说不是最好的解决方案。
是否有解决此冲突的本地方法?谢谢。
最佳答案
发现 Bootstrap 被链接到该页面两次。如上所示显式和隐式通过 stepoftheweb.com 主题捆绑脚本(我在问题中省略了这个细节,我认为这无关紧要)
因此,我删除了链接到该页面的第一个脚本,现在它可以正常工作了。
关于javascript - bootstrap-sass 多选事件冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35378368/