bootstrap-sass multiselect事件冲突

Question

I've got a strange issue using bootstrap-sass and bootstrap-multiselect . Seems like bootstrap-sass event handlers block multiselect handlers for dropdown etc.

This packages installed via bower:

'bootstrap-sass-official#3.3.1',
'bootstrap-multiselect'

App built on django and python, so template that binds scripts to the page:

{% compress js %}
    <script src="{% static 'jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'bootstrap-sass/assets/javascripts/bootstrap.js' %}"></script>
{% endcompress %}

binding script on a specific page using:

{% block extrajs %}
    <script src="{{ STATIC_URL }}bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"
            type="text/javascript" charset="utf-8"></script>
{% endblock %}

crearing multiselect control:

$('.multiselect').multiselect()

Nothing special. But when i try to use multiselect control on UI it doesn't drop down. No errors in console.

After some surfing through the code i figured that there are some event handlers that preventing multiselect handlers from executing:

  // 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)

so, the tricky solution was to switch off the standard event handlers first on the page where multiselect used:

$(document)
     .off('click.bs.dropdown.data-api')
     .off('keydown.bs.dropdown.data-api')

Which seems a bit hacky and not the best solution to me.

Are there native ways to resolve this conflict? Thanx.

Answer 1

Figured that Bootstrap is linked twice to the page. Explicitly as shown above and implicitly through stepoftheweb.com themes bundled script (i omitted this detail in the question, i thought it doesn't matter)

So, i removed first script linking to the page and now it works fine.