bootstrap-select hide事件未觸發

Question

我試圖弄清楚為什么我無法在bootstrap-select關閉時觸發關閉事件。

 $(function() { $('.selectpicker').on('hide.bs.dropdown', function () { alert('hide.bs.dropdown'); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script> <select class="selectpicker" multiple="true" data-done-button="true" data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

Answer 1

hide.bs.dropdown事件與hide.bs.dropdown的父級綁定，而不是與selectpicker本身綁定，因此您需要：

 $(function() { $('#selectpicker-container').on('hide.bs.dropdown', function () { alert('hide.bs.dropdown'); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script> <div id="selectpicker-container"> <select class="selectpicker" multiple="true" data-done-button="true" data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> 

Answer 2

bootstrap-select插件具有與標准引導程序下拉列表不同的事件。 看到這里 。

rendered.bs.select，refreshed.bs.select，change.bs.select，hide.bs.select，hidden.bs.select，show.bs.select，shown.bs.select

hide.bs.select，hidden.bs.select，show.bs.select和shown.bs.select都有一個relatedTarget屬性，其值是切換的錨元素。

changed.bs.select遍歷事件，clickedIndex，newValue，oldValue。 如果選擇則為true，如果未選擇則為false。

所以，試試： -

$(function() {    
    $('.selectpicker').on('hide.bs.select', function () {
        alert('hide.bs.select');
    });
});