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()

这是一个错误还是什么？

Answer 1

这是一个Safari移动bug /功能：点击事件不会一直冒泡到身体。

添加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>

fiddle

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

以及绑定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 6

我在iPhone 5C及以下版本中遇到过这个问题这对我有用：

body {
  cursor:pointer;
}

Answer 7

我遇到了一个问题，我预先添加到html正文中。我在[jQuery 'click' event doesn't work on iOS Safari?

上发现了这个问题

我用过这个

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

它适用于iPhone 4S和iPhone 5S

jQuery .on（）和.delegate（）在iPad上不起作用

7 个答案: