Question

我想使用XML文件来切换使用jQuery $ .ajax（{...}）动态生成的列表。它可以在桌面上使用Safari和Chrome工作，但不适用于移动Safari。 Delegate和Live也不能在移动设备上工作。

我正在使用jQuery 1.7.2 iPad（iOS 5.1）iPhone（iOS 5.0.1）
不使用jQuery mobile

jQuery docs建议使用.on（）而不是.live（），因为live从1.7开始被弃用

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调用之后使事件绑定保持不变，您需要将它们绑定到文档而不是元素，例如：

INSTEAD OF：

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

使用：

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

但是这个文档绑定在Safari for iOS mobile上不起作用，除非你在元素的HTML中包含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>

Answer 4

你是否被包裹在jQ DocReady中？ $(function() { ... })

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

Answer 5

ABS我遇到了同样的问题。当我将on('change')添加到它工作的html中时。

Answer 6

$（document）.on也是新版桌面Safari的问题（至少8.0.8）。 Safari也只使用变量而不指定名称和值来解决Ajax POST调用问题。只指定变量适用于Chrome和Firefox。

在Safari中不起作用：

var id = 1;
$.ajax({
            type: "POST",
            url: "@Url.Action("AjaxAction")",
            data: {
                id
            }
        });

适用于所有浏览器：

var id = 1;
$.ajax({
            type: "POST",
            url: "@Url.Action("AjaxAction")",
            data: {
                id:id
            }
        })

Answer 7

实际上，优良作法是委派给更高级别的元素（文档或其他容器）。尽管在定位iOS时，您必须考虑以下因素：在jQuery中进行$(document).on('click', '.target-element', function (event) {...});之类的事件委托将不起作用。您必须将onclick=""添加到目标元素或将cursor: pointer添加到其样式。

说明取自http://gravitydept.com/blog/js-click-event-bubbling-on-ios：

事实证明，iPhone上的Safari不支持单击事件的事件委托，除非单击发生在链接或输入上。幸运的是，有一些解决方法。

Answer 8

还有两个选择器供选择：）

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

$("ul[id='movies'] li").on("click", function(){
    $(this).toggleClass('selected');
})

jQuery on（）不适用于移动Safari

8 个答案: