jQuery .on() and .delegate() doesn't work on iPad
Solution 1
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
Solution 2
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!".
Solution 3
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>
Solution 4
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.
Solution 5
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.
Comments
-
Martin. almost 2 years
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?