I can't seem to get Chosen:ready to fire, can someone confirm if this usage is right or wrong?
jQuery('.chzn-select').on('chosen:ready', function () {
jQuery('li').ScrollText();
});
".chzn-select" is the class that chosen is bound prior to this code.
Thanks
I guess you are simply binding your listener too late (if you bind it after chosen is ready, it will not see the event). Try binding the listener before applying chosen
Ah, that was part of the solution. there was also a line unbinding all events from chosen prior to setting it up which removed it. I believe the unbind line was added due to weirdness in asp.net and postbacks.
Thanks for quick reply.
Closed. :+1:
Sorry one other thing, I should in be able to get the chosen object in this function like below, is that correct?
jQuery('.chzn-select').on('chosen:ready', function (chosen) {
jQuery('li').ScrollText();
});
I'm looking to get the new element and do something to it when ready. Does the object chosen contain this? I see the obj has a result however this is always undefined.
Okay, I'm closing this again.
I worked out this will never work. As I wish to apply an event to each option in the chosen dropdown, however the issue is the options are not created until the dropdown is clicked on. Therefore I could possibly move my code into the "chosen:showing_dropdown" event.
the first argument of the event listener is always the event object. The parameters are the second argument: http://harvesthq.github.io/chosen/options.html#triggered-events
ah I missed the second parameter. Thanks.
You should bind your events using delegation (like the deprecated $().live()
), because then the elements don't have to be present in the page when binding:
$('.chosen-select').on('click', 'li', handlerFunction);
More on event delegation here: https://learn.jquery.com/events/event-delegation/
I also ran into an issue where chosen:ready was not firing.
This did not work:
$('select')
.chosen()
.on('chosen:ready', function(){
console.log('chosen:ready')
});
but binding the event before instantiating chosen did work:
$('select')
.on('chosen:ready', function(){
console.log('chosen:ready')
})
.chosen();
the event is firing. But in the first case, your listener was probably registered after it was triggered
@stof Good clarification, thanks.
Just wondering but why are the list items created in the "showing_dropdown" event rather than the "ready" event?
The list items are not created in the chosen:showing_dropdown
.
chosen:ready
is triggered when the results are built and Chosen is ready to receive events, chosen:showing_dropdown
is triggered after opening Chosen.
So what is it that you're wondering about? ;)
My "Chosen-Results" list is always empty until I trigger the dropdown to open. I found another way of doing what I was doing but was just little curious about how this was working.
Most helpful comment
I also ran into an issue where chosen:ready was not firing.
This did not work:
but binding the event before instantiating chosen did work: