jQuery .on() 和 .delegate() 在 iPad 上不起作用

Question

如果您在桌面上嘗試此代碼段，則一切正常。
每當您在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()

是bug還是什么？

Answer 1

這是 Safari 移動錯誤/功能：單擊事件不會一直冒泡到正文。

添加onclick=""是一種已知的解決方法，但恕我直言，將您的偵聽器附加到<body>的第一個孩子上會更容易。

參見： http : //www.quirksmode.org/blog/archives/2010/09/click_event_del.html

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

我不確定為什么它不起作用，這可能是一個錯誤，但有一個很好的解決方法。 只需將onclick=""放在您委派的 div 上，它就會完美運行

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

小提琴

Answer 4

在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 5

我在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);
};

並在您綁定點擊事件處理程序的地方這樣做：

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 6

我在 iPhone 5C 及更低版本上遇到了這個問題。
這對我有用：

body {
  cursor:pointer;
}

Answer 7

我在 html 正文中添加了一條消息，遇到了問題。 我在 [ jQuery 'click' 事件在 iOS Safari 上不起作用？

我用過這個

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

它適用於 iPhone 4S 和 iPhone 5S

jQuery .on() 和 .delegate() 在 iPad 上不起作用

問題描述

7 個解決方案

解決方案1
34 已采納 2012-04-15 19:55:43

解決方案2
30 2012-08-29 13:33:58

解決方案3
12 2012-04-15 19:09:36

解決方案4
12 2014-11-13 20:57:32

解決方案5
3 2012-10-05 14:38:13

解決方案6
0 2016-02-16 12:45:29

解決方案7
0 2016-10-06 08:54:58

jQuery .on() 和 .delegate() 在 iPad 上不起作用

問題描述

7 個解決方案

解決方案1 34 已采納 2012-04-15 19:55:43

解決方案2 30 2012-08-29 13:33:58

解決方案3 12 2012-04-15 19:09:36

解決方案4 12 2014-11-13 20:57:32

解決方案5 3 2012-10-05 14:38:13

解決方案6 0 2016-02-16 12:45:29

解決方案7 0 2016-10-06 08:54:58

解決方案1
34 已采納 2012-04-15 19:55:43

解決方案2
30 2012-08-29 13:33:58

解決方案3
12 2012-04-15 19:09:36

解決方案4
12 2014-11-13 20:57:32

解決方案5
3 2012-10-05 14:38:13

解決方案6
0 2016-02-16 12:45:29

解決方案7
0 2016-10-06 08:54:58