Select Advance triggers .on('change') event twice

This topic has 2 replies, 2 voices, and was last updated 5 years, 10 months ago by pluginoven.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
February 4, 2019 at 9:38 PM #13205
pluginoven
Participant
When jQuery is used to detect a change in value for a select-advanced field type the change event it triggered twice.

For example, for a slelect-advance with a field id of my_field_id:
```
$(document).on('change', '#my_field_id', function() {
     console.log('phones ringing, dude.');
}
```
will fire the console.log twice on any change in selected values.

Why might this be and is there a currently known work-around?
Edit: Seems this is better documented at select2:
https://select2.org/programmatic-control/events

Add New Note to this Reply
February 11, 2019 at 4:27 PM #13258

Anh Tran
Keymaster

Hi,

We are using a technique that preserves the order of selected options in select2. This technique triggers an event change after it reorder the options. So that might causes the duplication.

In reality, you might cache in the event listener to make sure your code run only once.

Add New Note to this Reply

February 13, 2019 at 6:14 PM #13304
pluginoven
Participant
Perfect, thank you.
Jut for the record, the event listener was cached as follows:
```
let select_cache = null
$(document).on('change', '#my_field_id', function(event) {
    if (!select_cache) {
        setTimeout(() => {
            //do your thing
            console.log('phones ringing, dude.');
            //clear the cache
            select_cache = null
        }, 100)
    }
    select_cache = event
}
```
Issue can be marked as resolved.

Add New Note to this Reply
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.