jQuery Mobile 无法在 Android 设备上动态更改图像

Question

jQuery Mobile 无法在 Android 设备上动态更改图像。请帮忙。

附加信息：

我要做的是更改安全图像。它在我的机器上本地运行，但我可以使用我的网络 IP 地址访问代码和 api，并且它可以工作。当我尝试更改从 url 获取的图像时，它只会在 safari 中更改，我在 chrome、Firefox 等中尝试过，但没有运气。

我尝试在后面设置 date.getTime() ，但这也不起作用。 我已经调试了代码，当我按下按钮时，图像没有任何反应，输入字段变为 null。

所以我的问题是每次单击按钮时都要更改图像。

  $("#newSecurityCode").on("click",function () {
        $("#securityCheckImg").attr("src", urlprefix() + "captcha");
        $("#securityTextField").val("");
    });

此代码适用于 safari Mac 和 iPhone，但不适用于 chrome、Firefox .....

$("#newSecurityCode").click(function() {
  $("#securityCheckImg").attr("src", url());
  $("#securityTextField").val("");
});

<tr>
  <td>
    <img id="securityCheckImg">
  </td>
</tr>

Answer 1

几件事。

永远不要使用经典的 jQuery 点击事件绑定。始终使用 on 并在文档对象上执行此操作。 jQuery Mobile 代码很慢，很有可能在将内容加载到 DOM 之前执行 JavaScript。如果您发现它要记录，那么 img 是否是 DOM 的一部分并不重要。一旦 img 被加载到 DOM 中，这个事件就会被传播给它。

所以像这样使用它：

    $(document).on('click touchstart', '#newSecurityCode',function () {
        $("#securityCheckImg").attr("src", url());
        $("#securityTextField").val("");
    });

另外，如果您在实际的 Android 手机上执行此代码，则无法执行 localhost URL。本地主机仅在您的计算机上执行时才有效。 将您的手机连接到 WiFi 并调用您的计算机 IP 地址而不是 localhost。 当然，这只有在您的服务器允许在您的计算机之外访问时才有效。

Answer 2

我认为这是缓存值的问题...（您应该在发布之前阅读this；））

让我们试试这个：

 $("#newSecurityCode").on('click touchstart', function () {
   d = new Date();
   $("#securityCheckImg").attr("src", url() + "?" + d.getTime());
   $("#securityTextField").val("");
 });

这个timeStamp会强制浏览器重新加载图片

Answer 3

分享的信息不多，但你可以试试这个：

$("#newSecurityCode").on('click touchstart', function () {
  $("#securityCheckImg").attr("src", url());
  $("#securityTextField").val("");
});

<tr>
    <td><img id="securityCheckImg"></td>
</tr>

或者，如果您只针对移动设备，您可以使用原版 JS 和 ontouchstart 事件：
此处示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_touchstart