Jquery using .on() when element doesn't exist not working on ios7

Question

I'm trying to use jquery "on" method to listen to click event on an element that might not be in page yet. (in my example the element is in page), however it doesn't work on iOS7

tested and working on:
chrome 32.0.1700.72 m
ff 26
Android 4.3 Samsung s3

Not working on my iPhone 4s running ios7

jsfiddle: http://jsfiddle.net/MPYKX/

HTML:

<div id="clickable">Click me</div>

JS:

var onClick = function () {
    alert("ok");
};

$(document).ready( function () {
    $(document).on("click", "#clickable", onClick);
});

Duplicate http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery — Chris Dixon, Jan 22 '14 at 13:54
It may be worth looking into `ontouch` events.. as you don't really "click" an element on touch devices — CᴴᵁᴮᴮʸNᴵᴺᴶᴬ, Jan 22 '14 at 13:54

score 3 · Accepted Answer · answered Jan 22 '14 at 13:55

3

Click events don't work on iOS, you'd have to use the touchstart, touchmove and touchend events to work out if the users tapped the screen.

answered Jan 22 '14 at 13:55

James Hibbard

16,490
14
62
74

Thanks, But I'm a bit confused, the other way of using a click event does work: `code`$("clickable").click(onClick) `code` Does work both on desktop, android and ios7. but adding touchend to : `code`$(document).on("click touchend", "#clickable", onClick); `code` triggers the events twice. Any ideas ? – Nir Cohen Jan 22 '14 at 16:01

score 0 · Answer 2 · answered Jan 22 '14 at 14:22

0

app.event = (ua.match(/iPad|Android/i)) ? "touchstart" : "click";
$(element).on(app.event, function(e) {
    e.stopPropagation();

answered Jan 22 '14 at 14:22

JAYBEkster

780
1
6
19

Jquery using .on() when element doesn't exist not working on ios7

2 Answers2