javascript - delegate - jquery onclick
jQuery.on()和.delegate()在iPad上不起作用 (5)
如果您在桌面上嘗試此代碼段,一切正常。
每當你在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>
簡單的.click()
處理程序可以工作,但它不是我想要的。 這同樣適用於.delegate();
和.live()
這是一個錯誤還是什麼?
https://src-bin.com
Answer #1
在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>
我知道很久以前就被問過了,但我認為一個簡單的CSS解決方案可能有所幫助。
Answer #2
將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>
我知道你現在在想什麼:“WTF!”。
Answer #3
我在http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/找到了解決方案
做以下方法:
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);
};
以及綁定click-event-handler的位置:
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
});
而已。
Answer #4
我在iPhone 5C及以下版本面臨此問題。
這對我有用:
body {
cursor:pointer;
}
Answer #5
這是一個Safari移動bug /功能:點擊事件不會一直冒泡到身體。
添加onclick=""
是一個已知的解決方法,但恕我直言,更容易將您的監聽器附加到<body>
的第一個子<body>
。
請參閱: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html : http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html