CODEWITHSUNDEEP
javascriptjqueryipaddelegation
Martin.
Martin.

Reputation: 10529

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

If you try this snippet on desktop, everything works.
Whenever you try it on iPad, it won't do anything.

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
div { 
  font-size: 24px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

Simple .click() handler works, but it isn't what I want. The same applies for .delegate(); and .live()

Is it a bug or something?

Upvotes: 31

Views: 16591

Answers (7)

Cosmin Cojocaru
Cosmin Cojocaru

Reputation: 25

I had an issue with a message that I prepend to the html body. I found this issue on [jQuery 'click' event doesn't work on iOS Safari?

I used this

$('body').on('click touchstart', 'someselect', function(){})

And it worked on iPhone 4S and iPhone 5S

Upvotes: 0

Rakesh Yembaram
Rakesh Yembaram

Reputation: 433

I was facing this issue on iPhone 5C and below.
This worked for me:

body {
  cursor:pointer;
}

Upvotes: 0

Simon Arnold
Simon Arnold

Reputation: 16177

On iOS there is no event bubbling without a cursor style.
So in your CSS you need to add cursor: pointer; to the element.

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
#click { 
  font-size: 24px; 
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

I know it been asked a long time ago, but I thought a simple CSS solution might help.

Upvotes: 12

algorhythm
algorhythm

Reputation: 8728

i found a solution on http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/

do the following approach:

var isIPad = function() {
    return (/ipad/i).test(navigator.userAgent);
};
var isIPhone = function() {
    return (/iphone/i).test(navigator.userAgent);
};
var isIPod = function() {
    return (/ipod/i).test(navigator.userAgent);
};

and where you bind the click-event-handler do so:

var eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "click";
// if you are using jquery-mobile
eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "vclick";

$(".selector").bind(eventName, function(e) {
    //do something here
});
// or
$(document).on(eventName, ".selector", function(e) {
    //do something here
});

that's it.

Upvotes: 3

Boroboro
Boroboro

Reputation: 301

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!".

Upvotes: 30

mddw
mddw

Reputation: 5580

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

Upvotes: 34

Martin.
Martin.

Reputation: 10529

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

Upvotes: 12

Related Questions