select2-selecting event not getting fired

Question

I am using Select2 in my website, and I'm trying to use the select2-selecting event, but its not firing. I am also using Backbone.js in the app, so the first thing I tried was adding the select2-selecting to my events object:

// 'change .city':'cityChanged'
'select2-selecting .city':'cityChanged'

Note that I have a change event commented out - this change event works properly. In the documentation for Select2, the select2-selecting event is put directly on the object, not like this:

$('.city').select2().on('select2-selecting', function(e){ 
     console.log('here');
});

instead, its supposed to be used like this:

$('.city').on('select2-selecting', function(e){ 
     console.log('here');
});

I have also tried adding the event both of these ways, but the event didn't fire (I did check and the element was created on the DOM before I added the events).

When I add the event in the first method with the Backbone.js, the event is listed in the event listeners in the chrome debug console - it just doesn't get fired. Does anyone have an idea what is going on?

Solution 1

what version of select2 are you using?

I was having the same problem until I realize I was using the 3.3 version where this select2-selecting event not exists.

This has been included in the 3.4 version.

Solution 2

There was a change on earlier versions also where it changes name:

• select2-close is now select2:close
• select2-open is now select2:open
• select2-opening is now select2:opening
• select2-selecting is now select2:selecting
• select2-removed is now select2:removed
• select2-removing is now select2:unselecting