11

Tôi gặp sự cố lạ khi sử dụng bootstrap-sassbootstrap-multiselect. Có vẻ như xử lý sự kiện bootstrap-sass chặn xử lý multiselect cho thả xuống, vvbootstrap-sass đa lựa chọn xung đột sự kiện

này gói cài đặt qua Chòi chơi:

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

App xây dựng trên django và python, vì vậy mẫu mà liên kết với các kịch bản đến trang:

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

ràng buộc kịch bản trên một trang cụ thể sử dụng:

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

điều khiển đa lựa chọn bị cắt:

$('.multiselect').multiselect() 

Không có gì đặc biệt. Nhưng khi tôi cố gắng sử dụng điều khiển đa lựa chọn trên giao diện người dùng, nó không thả xuống. Không có lỗi trong bảng điều khiển.

Sau một lướt qua mã tôi đã tìm rằng có một số xử lý sự kiện mà ngăn chặn xử lý multiselect từ thực hiện:

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

như vậy, giải pháp khéo léo đã tắt xử lý sự kiện tiêu chuẩn đầu tiên trên trang nơi multiselect được sử dụng:

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

Có vẻ hơi khó hiểu và không phải là giải pháp tốt nhất cho tôi.

Có cách nào để giải quyết xung đột này không? Thanx.

+0

Xin chào, hãy thử sử dụng id duy nhất trong tất cả các lựa chọn của bạn thay vì tên lớp. – claudios

Trả lời

6

Xác định rằng Bootstrap được liên kết hai lần với trang. Rõ ràng như được hiển thị ở trên và ngầm qua các chủ đề kèm theo stepoftheweb.com (tôi bỏ qua chi tiết này trong câu hỏi, tôi nghĩ nó không quan trọng)

Vì vậy, tôi đã xóa tập lệnh đầu tiên liên kết tới trang và bây giờ nó hoạt động tốt.

+0

Xin chào, làm thế nào để bạn tìm ra Bootstrap được liên kết hai lần? Họ ở đâu? – RockU