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

【问题标题】：jQuery .on() and .delegate() doesn't work on iPadjQuery .on() 和 .delegate() 在 iPad 上不起作用
【发布时间】：2012-04-27 06:03:47
【问题描述】：

如果您在桌面上尝试这个 sn-p，一切正常。
无论何时您在 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还是什么？

【问题讨论】：

你在使用jquery mobile吗？ on 于 2011 年 11 月添加到 jquery 1.7.2 中，但尚未加入 jquery mobile。
@joeframbach，你的意思是它被添加到 jQuery 1.7
@joeframbach，我也不明白你的意思。 jQuery Mobile 不是独立的……它需要 jQuery；所以如果你使用的是 jQuery 1.7，你有 on().
Martin，使用click 作为id 的名称有可能是根本问题吗？（我没有办法测试它）也许它不是保留词，但就我个人而言，我会远离以这种方式命名的东西。

标签： javascript jquery ipad delegation

【解决方案1】：

我不确定为什么它不起作用，这可能是一个错误，但有一个很好的解决方法。只需将onclick="" 放入您委派的 div 即可完美运行

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

fiddle

【讨论】：

It's entirely OK to ask a question and answer it immediately. 甚至我以前也做过。如果您有任何异议，请随时在 meta 上提出；不要劫持答案的评论线程。谢谢。

【解决方案2】：

这是一个 Safari 移动错误/功能：点击事件不会一直冒泡到正文。

添加onclick="" 是一种已知的解决方法，但恕我直言，将您的侦听器附加到<body> 的第一个孩子上会更容易。

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

【讨论】：

啊，这也是一个很好的答案！是的，这可能是一个全球性的解决方法！
此外，事件冒泡的次数越少越好。将 .on() 附加到 body 通常（并非总是）适得其反。在这里，你的元素是一个唯一的#id，所以直接绑定就足够了，只要它没有注入 Ajax。
@mdi 我不明白你的意思。如果您从 ajax 请求中获取 #id，则需要使用委托或 .on()
这正是我的意思...直接绑定在#id 上，除非 Ajax。
很好的研究，你的测试例子证明了这种行为。但最简单的解决方法是添加 cursor:poiner - 它会使点击冒泡。在此处查找 Simon Arnold 的答案。

【解决方案3】：

在 iOS 上将 body 的光标样式更改为“指针”，一切都会完美运行。您不必在想要点击的每个元素上都添加 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！”。

【讨论】：

我为这种奇怪行为找到的最佳解释在这里 (swsharinginfo.blogspot.in/2013/03/…)。总之，在 iPad/pod/手机上的第一次触摸被视为悬停。为了告诉浏览器该元素是可点击的，您需要将 cursor:pointer 添加到该元素。注意 1. 将 cursor:pointer 添加到基础元素 $('#myElement') 而不仅仅是 $('myElement:hover')。注意 2. 您可以简单地将cursor:pointer 添加到您的 css。它对我有用！
我确实是这么想的。
我为这种行为找到的最佳解释：Apple can't code for s**t.在 iOS 9 上的 Safari 上，这种问题仍然存在。

【解决方案4】：

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

就是这样。

【讨论】：

这很有意义！
不能在同一个on()中声明两个事件吗？那么为什么不直接做 $(document).on("click touchstart,".class",function)

【解决方案5】：

在 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 解决方案可能会有所帮助。

【讨论】：

西蒙，你摇滚！这既是对此行为的简单解释，也是快速解决方法。你拯救了我的一天。

【解决方案6】：

我在 iPhone 5C 及以下机型上遇到过这个问题。
这对我有用：

body {
  cursor:pointer;
}

【讨论】：

【解决方案7】：

我对添加到 html 正文的消息有疑问。我在 [jQuery 'click' event doesn't work on iOS Safari?

上发现了这个问题

我用过这个

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

它适用于 iPhone 4S 和 iPhone 5S

【讨论】：