Proximity Issue with radio boxes

Proximity Issue with radio boxes

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

Here is the code:

  1.             <div class="formcontent" id="formContent">
  2.             <div data-role="fieldcontain" id="companyContainer" class="ui-field-contain ui-body ui-br">
  3.                 <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">
  4.                         <div class="ui-radio">
  5.                             <input type="radio" onclick="selectCompany(1)" name="company_select" id="company_select_0" value="0">
  6.                             <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>
  7.                         </div>
  8.                         <div class="ui-radio">
  9.                             <input type="radio" onclick="selectCompany(2)" name="company_select" id="company_select_1" value="1">
  10.                             <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>
  11.                         </div>
  12.                         <div class="ui-radio">
  13.                             <input type="radio" onclick="selectCompany(4)" name="company_select" id="company_select_2" value="2">
  14.                             <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>
  15.                     </div>
  16.                 </fieldset>
  17.             </div>
  18.         </div>

The only thing that I am able to detect is that if I click on the proximity of two components they get their onclick event launched, however the visual component is not always the last one that was touched.

For instance. I click on the proximity of the two top radios, and I get the first radio visually checked, however the second radio onclick is also called.

In my case this is critical since the onclick event sets a variable, that shows an image on the next screen... the wrong image is selected based on the variable being setup with the wrong value.

I have worked around this issue by using a selector like so:

  1. function verifySelecedCompany(){
  2.     var selectedCompanyID = $("input[@name=company_select]:checked").attr('value');
  3. }

Is this a known issue? I don't think there is anything wrong with the original code, it should provide a consistent behavior on tablets, what am I missing here?