Selectpicker 导致 Jquery .on('change') 触发两次答案

【问题标题】：Selectpicker causes Jquery .on('change') to trigger twiceSelectpicker 导致 Jquery .on('change') 触发两次
【发布时间】：2019-10-11 20:22:32
【问题描述】：

当对 <select> 列表使用 bootstrap-select selectpicker 时，我遇到了一个问题，即它会触发两次更改事件。

例如这里是我的选择列表

<select class="form-control selectpicker label-picker" data-style="btn-white" data-live-search="true" data-size="10">
    @foreach (var option in property.Options)
    {
        <option value="@option.Value">@option.Label</option>
    }
</select>

这是我的 Jquery 脚本

<script>
    $(document).on('change', '.label-picker', function (e) {
        debugger;
    })
</script>

每当我更改下拉菜单时，它都会触发我的脚本两次。当我从我的选择中删除 selectpicker 类时，它只会触发一次。不过，我喜欢这种风格和内置的搜索下拉菜单功能，所以我更喜欢使用selectpicker。

我一直在检查我的代码，我只声明了一次bootstrap-select.min.js。我正在动态添加这个选择列表，它是我的 UI 中另一个操作的结果。我想知道这是否是问题的一部分，但我不确定为什么它只是在引用 selectpicker 时才给出问题。

任何建议都会有所帮助，因为我在这方面浪费了很多时间。

【问题讨论】：

在这里猜一猜，但是看起来选择选择器已经内置了功能，并且您通过添加新功能将更改事件连接了两次，这有意义吗？

标签： javascript jquery html bootstrap-selectpicker

【解决方案1】：

我不知道你是如何解决这个问题的，但我今天也遇到了这个问题，这似乎是由于对 jQuery 选择器使用了类名，而这个类被分配给了 select 元素以及 selectpicker 包装器元素，因此该事件被触发两次。

这里有一些讨论： https://github.com/snapappointments/bootstrap-select/issues/1322

我个人通过在 jQuery 选择器前加上 select 来解决它——所以它是 select.classname——这会阻止它连接事件处理程序到 selectpicker 包装器。

值得强调的是，这只是在使用类名作为选择器时出现的问题；在使用id 或其他任何东西时，我从未见过任何重复...

【讨论】：

【解决方案2】：

帮不了我

所以最后我必须做 stopImmediatePropagation();

 $(document).on('change', '#label-picker', function (e) {
        / / Respective Code ....


       e.stopImmediatePropagation()

    })

【讨论】：

【解决方案3】：

引导元素使用与您指定的类相同的类，它调用了两次。所以使用 Inspect 元素检查并找到选择器的唯一路径：

示例：

<select class="selectpicker myclass">
     <option></option>
     ....
</select>


$(document).on('changed.bs.select', '.my-class select', function () {})

【讨论】：