Click event attached to Checkbox/Radio wrapper doesn't work in mobile browser #6649

Closed
polarfish opened this Issue Oct 24, 2013 · 4 comments

Projects

None yet

4 participants

@polarfish

Issue description

Click event attached to Checkbox/Radio item do work in desktop browser but doesn't work in mobile browser.

Here is generated HTML:

<div class="ui-controlgroup-controls ">
  <span name="cbox">
    <div class="ui-checkbox">
      <label id="cbox-label" for="cbox1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-first-child ui-last-child ui-checkbox-on">alert("handler");</label>
      <input type="checkbox" name="cboxgroup" id="cbox1" value="1" data-cacheval="false">
    </div>
  </span>
</div>

And event logic:

$('[name="cbox"]').on("click", function(){
    alert("handler")
});

Test page

http://jsbin.com/epoQubuV/1

Steps to reproduce

Open test page in mobile browser and tap the checkbox.

Expected outcome

Alert pops up.

Actual outcome

Nothing happens.

Platforms/browsers (including version) and devices tested

Chrome 30, Fedora 19
Chrome 30, Android 4.2.2, Samsung Galaxy Ace 3

jQuery Mobile and jQuery core version used

JQM - latest
JQ - 1.10.1

@JoeBot0101

@polarfish on mobile devices 'click' event delegation works differently...basically it seems to only work as expected if you bind to links or inputs. If you were to bind the event to the input element, it would fire the alert.

recommending to close as not a bug.

@jaspermdegroot
Member

Thanks @JoeBot0101. Agreed, closing as not a bug.

@arschmitz
Member

This is a bug real and it's a long standing bug, or "kinda" bug we are doing this intentionally it has to do with our handling of vclick on the label. Right now we handle this directly instead of letting it happen normally on the element. This prevents an issue with a double click event. Please see http://jsbin.com/bedoz/2/edit for given example without jQuery mobile you will see it functions on both desktop and mobile however the handler is triggered twice. This is done in this function https://github.com/jquery/jquery-mobile/blob/master/js/widgets/forms/checkboxradio.js#L171 you can see we return false at the end and trigger our own click.

I'm reopening this however its unlikely this will be fixed in the current widget the current widget is set to be replaced by the new ui checkbox radio widget which is currently under development.

@arschmitz arschmitz reopened this Jun 29, 2014
@arschmitz
Member

Closing this the 1.5 ui widget is now in a branch and im going to close this as wont fix

@arschmitz arschmitz closed this Oct 23, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment