I'm triying to open an select after a button click, But it doesnt work. If I insert and alert() after the trigger the it opens...
(Using chosen v1.0 with jquery)
example:
<select id="select">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<br>
<button onclick="$('#select').trigger('chosen:open'); ">Press this button to open (doesnt work) </button>
<button onclick="$('#select').trigger('chosen:open'); alert('ups!');">Press this button to open (work???)</button>
<script>
$(document).ready(function() {
$('#select').chosen();
});
</script>
example in: http://jsfiddle.net/EArg6/28/
vpode
All 5 comments
Neither button works for me in your Fiddle (in Safari).
What browser/version are you using?
tjschuck
on 23 Dec 2013
I tested it with:
- Firefox 25.0.1
- Opera 12.16
- Chrome 31.0.1650.63 m
The first button dont work
The second button open the option list (only to close when the I close the "alert" box).
vpode
on 23 Dec 2013
When you click the button, Chosen is receiving the chosen:open event. However, the event continues to bubble up the DOM and Chosen is immediately detecting a click on an element that is not the active Chosen ... so it closes it. Make sense?
If you are working with inline JS, the easiest solution is to use setTimeout to break out of the current event stack:
onClick="setTimeout(function(){ $('#select').trigger('chosen:open'); }, 0)"
You almost certainly shouldn't be using inline JS, though. You can still use setTimeout if you want, but just stopping the event bubbling should be good enough.
$('button').on("click", function(evt){
evt.stopPropagation();
$('#select').trigger('chosen:open');
});
I've updated your fiddle with this working code: http://jsfiddle.net/EArg6/33/
pfiller
on 28 Dec 2013
thanks @pfiller
pruett
on 22 Apr 2014
Thanks @pfiller, that solution and explanation saved me a lot of heartburn!
shivaray
on 26 Jul 2016
Related issues
blankhang
·
7Comments
SFPink
·
4Comments
alexfrancavilla
·
9Comments
Jeckerson
·
7Comments
mcclurem
·
4Comments
Most helpful comment
When you click the button, Chosen is receiving the
chosen:openevent. However, the event continues to bubble up the DOM and Chosen is immediately detecting a click on an element that is not the active Chosen ... so it closes it. Make sense?If you are working with inline JS, the easiest solution is to use
setTimeoutto break out of the current event stack:You almost certainly shouldn't be using inline JS, though. You can still use
setTimeoutif you want, but just stopping the event bubbling should be good enough.I've updated your fiddle with this working code: http://jsfiddle.net/EArg6/33/