jQuery .on() and .delegate() doesn't work on iPad

It's a Safari mobile bug/feature : click events won't bubble all the way up to body.

Adding onclick="" is a known workaround, but IMHO it's easier to attach your listener on a first child of <body>.

See: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html


Change the cursor style of the body on iOS to "pointer" and everything will work perfectly. You won't have to add onclick="" on every element you want clickable...

<script type="text/javascript">
    $(function() {
        // The trick
        if (/ip(hone|od)|ipad/i.test(navigator.userAgent)) {
           $("body").css ("cursor", "pointer");
        }
        // The test
        $("body").on("click", "#click", function() {
            alert("This also works on iOS !");
        });
    });
</script>
<div id="click">Click here</div>

I know what you're thinking right now: "WTF!".


I'm not sure why doesn't it work, it's probably a bug, but there's a nice workaround. Simply put onclick="" to the div you're delegating and it will work perfectly

<div id="click" onclick="">Click here</div>
<script>
$("body").on("click", "#click", function() {
    alert("This works on iPad");
});
</script>

fiddle

Tags:

Javascript

Jquery

Ipad

Delegation

Recent Posts