How to make Chosen and FastClick work on a mobile device

Question

I am trying to add FastClick to a site that already uses the Chosen jQuery Plugin to select. Using FastClick, select boxes simply stop responding to clicks on mobile browsers. It can also be replicated with a Chrome device emulation.

You can check this out for yourself on this simple jsFiddle :

<select id="foo">
    <option>Bar</option>
    <option>Asdf</option>
</select>

$("#foo").chosen()

Steps for replicating with the Chome Canary:

• Download http://fiddle.jshell.net/7ftdo0j3/3/show/
• Open developer tools and emulate the Google Nexus 7 or Apple iPad 1/2 (others may work as well)
• Try using select.

Answer 1

, , , touch . " ", , , , , , ;)

, , FastClick needsclick DOM, :

$("#test").chosen();
$(".chosen-container *").addClass("needsclick");
FastClick.attach(document.body);

, . , , .

, needsclick div.chosen-container , , . touch . , :

• Chosen div , .
• div,
  • Eg. ( span),
• FastClick needsclick
  • , touch , click
• , , Chosen . , .chosen-container jQuery:

$(".chosen-container").trigger('click');

. mousedown , :

$(".chosen-container").trigger('mousedown');

, , , Chosen touchstart touchend , , FastClick . , , : D

Chosen , , . , , , , . , , - . , , , .