javascript jQuery .on() 和 .delegate() 在 iPad 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10165141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .on() and .delegate() doesn't work on iPad
提问by Martin.
If you try this snippet on desktop, everything works.
Whenever you try it on iPad, it won't do anything.
如果您在桌面上尝试此代码段，则一切正常。
每当您在iPad上尝试它时，它都不会执行任何操作。
$('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()
简单的.click()处理程序有效，但这不是我想要的。这同样适用于.delegate();和.live()
Is it a bug or something?
是bug还是什么？
回答by mddw
It's a Safari mobile bug/feature : click events won't bubble all the way up to body.
这是 Safari 移动错误/功能：单击事件不会一直冒泡到正文。
Adding onclick=""is a known workaround, but IMHO it's easier to attach your listener on a first child of <body>.
添加onclick=""是一种已知的解决方法，但恕我直言，将侦听器附加到<body>.
See: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
参见：http: //www.quirksmode.org/blog/archives/2010/09/click_event_del.html
回答by Boroboro
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...
将 iOS 上主体的光标样式更改为“指针”，一切都会完美运行。您不必在您想要点击的每个元素上添加 onclick=""...
<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!".
我知道你现在在想什么：“WTF！”。
回答by Martin.
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
我不确定为什么它不起作用，这可能是一个错误，但有一个很好的解决方法。只需将其放入onclick=""您委派的 div 中即可完美运行
<div id="click" onclick="">Click here</div>
<script>
$("body").on("click", "#click", function() {
alert("This works on iPad");
});
</script>
回答by Simon Arnold
On iOSthere is no event bubbling without a cursor style.
So in your CSS you need to add cursor: pointer;to the element.
在iOS上，没有光标样式就没有事件冒泡。
所以在你的 CSS 中你需要添加cursor: pointer;到元素中。
$('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 solutionmight help.
我知道很久以前就有人问过这个问题，但我认为一个简单的 CSS 解决方案可能会有所帮助。
回答by algorhythm
i found a solution on http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/
我在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.
而已。
回答by Rakesh Yembaram
I was facing this issue on iPhone 5C and below.
This worked for me:
我在 iPhone 5C 及更低版本上遇到了这个问题。
这对我有用：
body {
cursor:pointer;
}
回答by Cosmin Cojocaru
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?
我在 html 正文中添加了一条消息，我遇到了问题。我在 [ jQuery 'click' 事件在 iOS Safari 上不起作用？
I used this
我用过这个
$('body').on('click touchstart', 'someselect', function(){})
And it worked on iPhone 4S and iPhone 5S
它适用于 iPhone 4S 和 iPhone 5S
