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

Question

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

附加信息：

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

我尝试设置一个date.getTime（），但这也不起作用。我调试了代码，当我按下按钮时图像没有任何反应，输入字段变为null。

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

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

此代码适用于Safari和iPhone，但不适用于Chrome，Firefox .....

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

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

Answer 1

一些事情。

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

所以像这样使用它：

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

另外，如果您在实际的Android手机上执行此代码，则无法执行localhost URL。 Localhost仅在您的计算机上执行时才起作用。将手机连接到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>

或者，如果您只定位移动设备，则可以使用vanilla JS和ontouchstart事件： 示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_touchstart