CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-selectpicker
A. Hasemeyer
A. Hasemeyer

Reputation: 1734

Selectpicker causes Jquery .on('change') to trigger twice

When using bootstrap-select selectpicker for <select> lists I am having an issue where it is triggering the on change event twice.

for example here is the my select list

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

and here is my Jquery script

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

Whenever I change my dropdown it triggers my script twice. When I remove the selectpicker class from my select it will only trigger once. However, I like the style and the built in ability to search dropdowns so I would prefer to use selectpicker.

I have been checking through my code and I only declare bootstrap-select.min.js once. I am adding this select list dynamically, where it is the result of another action in my UI. I wonder if this is part of the issue, but I am not sure why it is only giving the issue when referencing selectpicker.

Any suggestions would be helpful as I am wasting a lot of time on this.

Upvotes: 7

Views: 4871

Answers (3)

Javad Asoodeh
Javad Asoodeh

Reputation: 318

The bootstrap elements are using the same class as you specify and it called twice.so using Inspect element check and find a unique path for selector:

Sample:

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


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

Upvotes: 0

BJ Patel
BJ Patel

Reputation: 6268

Nothing help me

so at the end I have to do stopImmediatePropagation();

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


       e.stopImmediatePropagation()

    })

Upvotes: 4

Christopher King
Christopher King

Reputation: 1715

I don't know how/if you ever resolved this but I ran into it today as well and it seems to be due to using a class-name for the jQuery selector and this class is assigned to the select element as well as the selectpicker wrapper elements, so the event is triggered twice.

There is some discussion around this here: https://github.com/snapappointments/bootstrap-select/issues/1322

Personally I solved it by prefixing the jQuery selector with select -- so it's select.classname -- and that stops it from hooking up the event-handler to the selectpicker wrapper.

And it's worth emphasizing that this is only a problem when using the class-name as the selector; I have never seen any duplicates when using id or anything else...

Upvotes: 5

Related Questions