jQuery的attr()方法在移动版Safari上无法正常工作

Question

这是我的HTML标签。

<a href="#" id="test"><img id="imgtest" src="imgs/test_0.png" width="108" height="32" /></a>

这是我的 jQuery 代码。

$(document).ready(function () {
    $("#test").click(function () {    
        $('#imgtest').attr('src', 'imgs/test.png');
    });
});

当单击锚点标签时，我需要更改图片。这在桌面上的任何浏览器上都可以完美地工作，但是在移动Safari上却有问题。出了什么问题？

- Liz

---

你尝试使用prop而不是attr更改属性了吗？ - Denys Séguret

我现在会尝试，完成后会让你知道结果。谢谢 :) - Liz

你有收到任何错误信息吗？ - Streamside

更改attr为prop没有起作用:(我没有收到任何错误消息。我不知道如何在我的iPhone上获取错误信息。 - Liz

如果您触摸两次它，它是否有效？ - FiLeVeR10

Answer 1

移动版 Safari 仅在用户点击可点击元素（如链接）时才会产生鼠标事件。您可以通过为元素添加 onClick 事件处理程序使其可点击，即使该处理程序什么也不做。

-- 来自 这里 为使本来不可点击的元素可点击，可以添加一个虚拟 onclick 处理程序：

<img id="imgtest" src="imgs/test_0.png" onclick="void(0)" />

您已经将它变成了链接，所以这不是问题。

---

然而，如果有一个 mouseover 事件改变了任何内容（例如隐藏/显示下拉菜单中的内容），那么点击事件就不会触发。

-- 来自这里

---

你也可以尝试使用touchstart或touchend事件。

例如：

$(document).ready(function () {
    $("#test").on("click touchend", function () {    
        $('#imgtest').attr('src', 'imgs/test.png');
    });
});

- ryanwinchester