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事件与selectpicker的父级相关联，而不是与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插件具有与标准引导程序下拉列表不同的事件。见Here。

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   all都有一个relatedTarget属性，其值为切换锚点   元件。

changed.bs.select遍历事件，clickedIndex，newValue，   属性oldValue。如果选择则为true，如果未选择则为false。

所以，试试： -

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

bootstrap-select hide事件未触发

2 个答案: