11

Mam dziwny problem, używając bootstrap-sass i bootstrap-multiselect. Wygląda obsługi zdarzeń bootstrap-Sass zablokować wielokrotny teleskopowe na rozwijana itpbootstrap-sass multiselect event conflict

Ten pakietami poprzez altany:

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

App zbudowany na Django i Python, więc szablon, który wiąże skrypty na stronie:

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

wiążące skrypt na konkretnej stronie, używając:

{% 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 sterowania:

$('.multiselect').multiselect() 

nic specjalnego. Ale kiedy próbuję użyć kontroli wielokrotnego wyboru w interfejsie użytkownika, nie spada. Brak błędów w konsoli.

Po pewnym przeglądania poprzez kod i wzorzysty że istnieje kilka procedur obsługi zdarzeń, które uniemożliwiają wielokrotny teleskopowe z wykonujące:

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

Dlatego też trudne roztwór wyłączyć standardowe procedury obsługi zdarzeń najpierw na stronie, na której multiselect używany:

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

Co wydaje się nieco hacky i nie jest najlepszym rozwiązaniem dla mnie.

Czy istnieją natywne sposoby rozwiązania tego konfliktu? Thanx.

+0

Witam, spróbuj użyć unikalnych identyfikatorów we wszystkich mutliselect zamiast w nazwie klasy. – claudios

Odpowiedz

6

Wyliczyłem, że Bootstrap jest powiązany dwukrotnie ze stroną. Jawnie, jak pokazano powyżej i domyślnie poprzez stepoftheweb.com tematy skrypt w pakiecie (pominąłem ten szczegół w pytaniu, myślałem, że to nie ma znaczenia)

Usunąłem pierwszy skrypt łączący się ze stroną i teraz działa dobrze.

+0

Cześć, jak się domyślacie Bootstrap jest połączony dwa razy? Gdzie oni są? – RockU