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

Question

当对<select>列表使用 bootstrap-select selectpicker 时，我遇到了两次触发 on change 事件的问题。

例如这里是我的选择列表

<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 时出现问题。

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

Answer 1

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

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

就我个人而言，我通过在 jQuery 选择器前添加前缀来解决这个问题select- 所以它是select.classname- 并且阻止它将事件处理程序连接到 selectpicker 包装器。

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