jQuery Mobile radio button, problems with onclick event?

Question

I am getting multiple onclicks on radio boxes on Tablets, on desktop everithing works fine but on tablet the selectCompany is called twice, is there an issue with onclick on Tablets?

Here is the code:

<div class="formcontent" id="formContent">
    <div data-role="fieldcontain" id="companyContainer" class="ui-field-contain ui-body ui-br">
        <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
            <div role="heading" class="ui-controlgroup-label">Empresa:</div>
            <div class="ui-controlgroup-controls">
                <div class="ui-radio">
                    <input type="radio" onclick="selectCompany(1)" name="company_select" id="company_select_0" value="0">
                    <label for="company_select_0" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-btn-up-c ui-radio-off"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Google</span><span class="ui-icon ui-icon-shadow ui-icon-radio-off">&nbsp;</span></span>
                    </label>
                </div>
                <div class="ui-radio">
                    <input type="radio" onclick="selectCompany(2)" name="company_select" id="company_select_1" value="1">
                    <label for="company_select_1" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Amazon</span><span class="ui-icon ui-icon-shadow ui-icon-radio-off">&nbsp;</span></span>
                    </label>
                </div>
                <div class="ui-radio">
                    <input type="radio" onclick="selectCompany(4)" name="company_select" id="company_select_2" value="2">
                    <label for="company_select_2" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-bottom ui-controlgroup-last ui-radio-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Apple</span><span class="ui-icon ui-icon-shadow ui-icon-radio-on">&nbsp;</span></span>
                    </label>
                </div>
            </div>
        </fieldset>
    </div>
</div>

Answer 1

What I did is unbind the variable...

$("#foodiv").bind("click", function( event ) {
  functionCalledOnce();
  $(this).unbind( event );
});

It's clean and works well for the effect.

Answer 2

I would check this question. Basically, it seems like the click event is firing for several touch events. Perhaps detecting the browser (i.e. if on a tablet) and handling the binding differently will solve your problem.