tap event in jquerymobile

Question

<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

try `vclick` instead of `tap`. `$(document).on('vclick', '.selector', function () { code here });` — Omar, May 17 '13 at 16:44

score 3 · Accepted Answer · answered May 17 '13 at 14:58

3

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    
});

answered May 17 '13 at 14:58

Gajotres

57,309
16
102
130

I know this, I've tried your code, but still doesn't work When I'm changing `'.ui-checkbox'` works great, but in `
` tap event doesn't work why?
– Aart Rainey May 17 '13 at 15:17
What platform are you using for the test? – Gajotres May 17 '13 at 15:36
2

Firefox on MacOS, Chrome on iOS Problem was in event. I'm changed `tap` event to `change` event, and works great. Thanks! – Aart Rainey May 17 '13 at 16:09

score 0 · Answer 2 · answered May 17 '13 at 14:46

0

I think the problem is that jQuery Mobile events cannot be defined in tags, so try to refeer by his id

use $("#checkbox-1a").on instead

answered May 17 '13 at 14:46

Víctor

3,029
3
28
43

I've tried! and used `bind` instead of `on`. nothing. The problem was into form, i think so – Aart Rainey May 17 '13 at 14:51

tap event in jquerymobile

2 Answers2