小编Iva*_*n L的帖子

bootstrap-sass multiselect事件冲突

我使用bootstrap-sassbootstrap-multiselect有一个奇怪的问题.看起来像bootstrap-sass事件处理程序阻止多项选择处理程序下拉等.

这个包通过凉亭安装:

'bootstrap-sass-official#3.3.1',
'bootstrap-multiselect'
Run Code Online (Sandbox Code Playgroud)

应用程序构建在django和python上,所以模板将脚本绑定到页面:

{% compress js %}
    <script src="{% static 'jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'bootstrap-sass/assets/javascripts/bootstrap.js' %}"></script>
{% endcompress %}
Run Code Online (Sandbox Code Playgroud)

特定页面上的绑定脚本使用:

{% block extrajs %}
    <script src="{{ STATIC_URL }}bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"
            type="text/javascript" charset="utf-8"></script>
{% endblock %}
Run Code Online (Sandbox Code Playgroud)

crearing multiselect控制:

$('.multiselect').multiselect()
Run Code Online (Sandbox Code Playgroud)

没什么特别的.但是,当我尝试在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)
Run Code Online (Sandbox Code Playgroud)

所以,棘手的解决方案是首先在使用多选的页面上关闭标准事件处理程序:

$(document)
     .off('click.bs.dropdown.data-api')
     .off('keydown.bs.dropdown.data-api') …
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap bootstrap-sass bootstrap-multiselect

11
推荐指数
1
解决办法
498
查看次数