jQuery on()不适用于移动Safari

Question

我希望使用toggleClass文件动态生成jQuery $.ajax({.})生成的列表。它在带有Safari和Chrome的桌面上工作得很好，但在移动Safari上却不行。委托和直播也不能在手机上工作。

我使用的是jQuery 1.7.2 iPad (iOS 5.1) iPhone (iOS 5.0.1)

不使用jQuery手机

jQuery文档建议使用.on()而不是.live()，因为从1.7开始就不推荐live

oringal html

<ul id="movies">
   /* empty */
</ul>

动态构建后

<ul id="movies">
    <li>Movie-1</li>
    <li>Movie-2</li>
    <li>Movie-3</li>
</ul>

以下内容适用于桌面Safari和Chrome，但不适用于移动Safari。

$(document).on('click', '#movies li', function() {
    $(this).toggleClass('selected');
});

cyrusv似乎也问过一个类似的问题，他自己也回答了这个问题，但他没有详细说明。https://stackoverflow.com/a/9538134/372567说：

向div元素添加onclick='‘。不知道为什么会起作用，但确实起作用了。-

Answer 1

将事件绑定到document元素并不是最佳实践，您应该这样做：

$('#movies').on('click', 'li', function() {
    $(this).toggleClass('selected');
});

Answer 2

因此，为了总结这一切，在我到达这里之前，我花了几个小时的调试/浏览时间：

要使事件绑定在Ajax调用后保持不变，需要将它们绑定到文档而不是元素，例如：

而不是：

$('.foo').on('click', function() { ... }

使用：

$( document ).on('click', '.foo', function () { ... }

但是这个文档绑定不会在Safari上工作，除非您在元素的iOS中也包含了onclick=""。奇怪但却是真的。

Answer 3

我在使用on()时也有类似的问题。它在桌面上的chrome和safari上工作，但在任何移动浏览器上都不工作。正如cyrusv所建议的那样，解决办法是这样做：

JQuery：

$('#questions').on('click', 'li', function() {
    ....
});

从以下位置更改HTML：

<div id="questions"> 
  <li>...</li>
  <li>...</li>
</div> 

至：

<div id="questions"> 
  <li onclick=''>...</li>
  <li onclick=''>...</li>
</div>