bootstrap-sass multiselect event conflict

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.

Disparagement

Hello, try to use unique id's in all your mutliselect instead of a classname. – Blaineblainey

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.

Disparagement

Hi, how do you figure out Bootstrap is linked twice? Where are they? – Descender