Select2 event fires multiple times

Question

I have my dropdowns appended dynamically in various situations. Now in a multi-select dropdown, I try to get the latest value selected using the select2:select event. When this event is fired I get multiple logs for the single action.

Here is the complete code:

$(document).on('change', '.optionsDropDown', function (e) {
       $('#myid').on('select2:select', function (e) {
             var data = e.params.data;
             console.log(data)
        })

       $('#myid').on('select2:unselect', function (e) {
             var data = e.params.data;
             console.log(data)
        })
})

It works fine for the dropdowns which are not appended dynamically.

can you try to use e.stopPropogation(); method inside your callback function — isa_toltar, Jun 09 '21 at 14:46
Does this answer your question? [why is jQuery click event firing multiple times](https://stackoverflow.com/questions/22180953/why-is-jquery-click-event-firing-multiple-times) — Don't Panic, Jun 09 '21 at 14:46
`.on` adds an event listener. So every time the `change` event fires, you add 2 new handlers (so 3 total handlers). Next time `change` fires, another 2 are added (5 total now), etc. They all run when the relevant event fires. — Don't Panic, Jun 09 '21 at 14:48
You can try to use a named function instead of anonymous that will prevent multiple listeners to be attached. Just fiy what you are doing there is not good. You should probably scope those listeners that are dynamic in the parent container and add only one listener, this pseudo selector logic should be inside the check and not in another listener. I can elaborate I am on my phone. — Ricardo Silva, Jun 09 '21 at 15:07
@Don'tPanic Thank you for the quick reply. Well, you have explained it very clearly. The solution provided in the link doesn't help. I also tried using .one() using which there are multiple logs for the change event then there is only one log for each change. — ashish-98, Jun 09 '21 at 15:08
@RicardoSilva will try what you are suggesting and let you know. — ashish-98, Jun 09 '21 at 15:11
@RicardoSilva replacing an anonymous function with a named function on an event handler will not stop it from being called multiple times. https://jsfiddle.net/5x1yk8z4/ Maybe you have a different syntax in mind? — freedomn-m, Jun 09 '21 at 15:23
The linked question explains exactly the problem, and explains exactly the solution. Copied from the accepted answer in that question: "*Do not bind click events inside of click events ...*". There are many other examples explaining the same thing here on SO ... Don't nest your event handlers. If the selects are added dynamically, delegate the handler, see eg https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Don't Panic, Jun 09 '21 at 16:14
I understand the point you are trying to make. But I have to read the params generated by the select2 event. I tried your suggestions but it's not solving the problem. — ashish-98, Jun 10 '21 at 05:22

score 0 · Accepted Answer · answered Jun 10 '21 at 14:56

0

As suggested in the comments it was the event loop that was causing the trouble.

This is what worked for me.

$(document).on('select2:select', '.dropDownClass', function (e) {
     var data = e.params.data;
     //logic...
 })

answered Jun 10 '21 at 14:56

ashish-98

41
1
5

score 0 · Answer 2 · answered Feb 01 '23 at 17:36

This solution is worked for me:

$('#element').off('select2:unselect').on('select2:unselect', function (e) {
  // Your event code here
});

You only need to off the event before binding event on the "on".

Some more example are here:

$('#element').off('select2:select').on('select2:unselect', function (e) {
  // Your event code here
});

Select2 event fires multiple times

2 Answers2