javascriptjqueryhtmljquery-mobilejquery-mobile-checkbox

tap event in jquerymobile


<div data-role="header" class="page-header"><h2>Header</h2></div>
<div data-role="content">
    <form>
        <fieldset data-role="controlgroup">
            <legend>Legend:</legend>
            <input name="checkbox-1a" id="checkbox-1a" type="checkbox"/ >
            <label for="checkbox-1a">Label</label>

And I use this script:

 $( ".class").on( 'tap', tapHandler ); 
function tapHandler( event ) {
    alert(123);
}

When I put this to header $(".page-header").on('tap' works great, but when $("input").on('tap') nothing happens

Why? onclick on input dont work on mobile devices


Solution

  • You have to understand, you are not taping on a checkbox input, you are taping on a jQuery Mobile representation of that checkbox. Original in put is hidden.

    This will work:

    $(document).on('tap', '.ui-checkbox', function(){ 
        // Do something    
    });