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>

Have you had any luck using onchange instead? – thewebguy Sep 24 '12 at 18:32 — thewebguy, Sep 24 '12 at 18:32
do radio support onchange? Ill try it. – Astronaut Sep 25 '12 at 09:48 — Astronaut, Sep 25 '12 at 09:48

score 2 · Answer 1 · edited May 23 '17 at 11:49

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.

edited May 23 '17 at 11:49

Community

1
1

answered Sep 24 '12 at 18:37

Steve

7,747
5
31
44

I have an issue that my values are dynamic... I need to figure out a better solution to this issue. – Astronaut Sep 25 '12 at 10:12
Perhaps using a combination of data attributes and classes with the [jquery.data](http://api.jquery.com/jQuery.data/) and [jquery.on](http://api.jquery.com/on/) would solve what you need. For example: $(document).ready(function () { $(".myradios").on("mousedown touchstart MozTouchDown", function() {alert($(this).data("myid");} ); }); – Steve Sep 25 '12 at 13:37

score 0 · Accepted Answer · answered Oct 26 '12 at 11:25

0

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.

answered Oct 26 '12 at 11:25

Astronaut

6,691
18
61
99

jQuery Mobile radio button, problems with onclick event?

2 Answers2