JQuery Ajax - reload Image onClick 适用于 chrome 但不适用于 firefox 或 IE

Question

好吧，这太吓人了.... 我正在尝试重新加载在服务器端生成的验证码图像，我不想为此重新加载整个页面，因此我必须使用 AJAX。 所以我要做的是首先在服务器端（使用 AJAX）触发一个 php 文件，它会更新所有需要的东西，这样我就可以拥有一个新的验证码图像。 然后，当这完成后，我只需更新图像 src=""，以从该 php 文件加载新图像。 代码如下：

---

• 文件 1

HTML：

<tr id="rowWithCaptcha">
                    <td><p><img id="captchaImg" src="./?<?php echo session_name() ?>=<?php echo session_id() ?>"/></p></td>
</tr>

JQuery 脚本：

$("#reloadImg").click(function(){
           $.ajax({
              url: 'getNewKCAPTCHA.php',
              cache: false,
              type: 'POST',  
              async: false,
              success: function(){
                 $("#captchaImg").attr("src","http://localhost/Captcha2/TestPages/TestPage3Q/getNewKCAPTCHA.php?");
              }
           });
        });

---

• 文件二：

PHP： kcaptcha.php 是所有验证码魔法发生的地方:) 因此，如果您只是在浏览器中打开此 php 文件，您将获得验证码图像本身。 如果你重新加载页面，图像每次都会改变.....

    <?php include('kcaptcha.php'); session_start(); $captcha = new KCAPTCHA(); $_SESSION['captcha_keystring'] = $captcha-getKeyString(); echo TRUE; ?>

---

所以现在奇怪的是，整个事情（AJAX 调用和图片更新）在新的 chrome 浏览器上运行良好，但是当我用 FFOX 或 IE 尝试它时，它只运行一次，任何进一步的点击都不起作用改变任何东西.....我认为它与 JQuery 部分有关，但我无法让它工作 :///

感谢每一个帮助！！！ 提前谢谢！

Answer 1

假设

url: 'getNewKCAPTCHA.php',

和

http://localhost/Captcha2/TestPages/TestPage3Q/getNewKCAPTCHA.php?

其实是同一个脚本，不需要调用两次。

考虑这个简单的方法（这是我在实际项目中使用的工作方法）：

$("#reloadImg").click(function(){
    var d = new Date ();
    var captcha = "http://localhost/Captcha2/TestPages/TestPage3Q/getNewKCAPTCHA.php?r=" + d.getTime ();
    $("#captchaImg").attr ("src", captcha);
});

http://jsfiddle.net/hGfgn/

问候

Answer 2

这可能与 HTML5 支持有关。我不久前也遇到了同样的问题，似乎FF和IE都不支持

$('whatever').click(function(){});

但如果你在 html-tag 中使用 onclick="function()" 调用它可以工作，但我不知道它是否工作

Answer 3

我不是编辑 src 属性的忠实粉丝。 我通常会删除图像（或替换为加载图像），然后附加新图像（并删除加载图像）。下面的代码应该删除图像并附加一个新图像 - 我错过了所有缓冲图像替换的东西

 $("#reloadImg").click(function(){
               $.ajax({
                  url: 'getNewKCAPTCHA.php',
                  cache: false,
                  type: 'POST',  
                  async: false,
                  success: function(){
                     $("#captchaImg").remove();
                     $("#rowWithCaptcha td p").append('<img id="captchaImg" src="http://localhost/Captcha2/TestPages/TestPage3Q/getNewKCAPTCHA.php?" />');

                  }
               });
            });

希望对你有帮助