Fastclick interfering with jQuery mobile non-native selects

Viewed 1532

I'm using Fastclick with jQuery Mobile and it's all working fine apart from some non-native selects now require two taps (not a double tap) to activate.

I'm adding the 'needsclick' class to all elements of the select, prior to attaching Fastclick, in an attempt to get Fastclick to ignore the selects:

        $("div.ui-select").addClass("needsclick");
        $("#searchPanel .ui-btn-inner").addClass("needsclick");
        $("#searchPanel a").addClass("needsclick");
        $("#searchPanel select").addClass("needsclick");
        bindFastClick();

This has the desired effect in the markup, blitzing the whole thing with 'needsclick':

<div id="searchPanel">
.....

<a href="#" role="button" id="searchLocationSlct-button" aria-haspopup="true" aria-owns="searchLocationSlct-menu" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" data-inline="true" data-mini="true" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-right needsclick ui-btn-up-c">
     <span class="ui-btn-inner needsclick">
        <span class="ui-btn-text">
             <span class="needsclick">Location</span>
        </span>
        <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
    </span>
</a>
<select name="searchLocationSlct" class="needsclick" id="searchLocationSlct" data-mini="true" data-inline="true" data-shadow="false" data-corners="false" data-native-menu="false" tabindex="-1">
    <option value="Camber Sands"> - Camber Sands</option>
    <option value="Romney Sands"> - Romney Sands</option>
    <option value="Shurland Dale"> - Shurland Dale</option>
</select>

But still I need two taps (not a double tap) to activate the select. If I turn off Fastclick, a single tap activates the non-native select, as expected.

I've googled for this problem, but can't find anything. Anyone seen this before or got any ideas?

1 Answers
Related