Clickable objects inside select options

We prepended a Font Awesome star to the beginning of each Select2 option. The intent was for users to be able to “favorite” certain options, shoving them to the top of the list.

To make this work, we utilized the select2:selecting event where we attach the code we want to fire when the star is clicked and block Select2 from engaging its default behavior of selecting the option and closing the selection list.


This works fine for options that are not already selected! However, Select2 doesn’t fire the selecting event when clicking on an option that is already selected. If a user selects an option and then re-opens the list with intent to click the star, the list simply closes again.

Is there a solution to this? Is there a better way of placing clickable elements inside the list options? Or is there a way to get the selecting event to fire on all selects and not merely “changes” in selection?