重新加载验证码图像

Question

我有一个PHP脚本生成一个png图像,其中验证码为图像文本.

session_start();   
$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz'; 
$captchanumber = substr(str_shuffle($captchanumber), 0, 8); 
$_SESSION["code"] = $captchanumber; 
$image = imagecreatefromjpeg("cap.jpg");     
$black  = imagecolorallocate($image, 160, 160, 160);   
$font = '../assets/fonts/OpenSans-Regular.ttf';  
imagettftext($image, 20, 0, 35, 27, $black, $font, $captchanumber);   
header('Content-type: image/png');    
imagepng($image);
imagedestroy($image);

我想通过jQuery或JavaScript重新加载图像,所以我使用这样的东西:

$(document).ready(function(e) {
    $('.captcha').click(function(){
        alert('yolo');
        var id = Math.random();
        $(".captcha").replaceWith('<img class="captcha" src="img/captcha.php?id='+id+'" />');
        id ='';

    });
});

场:

<img class="captcha" src="img/captcha.php">

作为第一次尝试,它的工作原理,但之后,如果我再次点击该字段,它将不再工作,我不知道为什么.

Answer 1

您正在用新元素替换dom元素,它将销毁所有附加的事件处理程序.

方法1:您可以通过使用事件委派来侦听动态添加的元素事件来解决此问题.

$(document).ready(function(e) {
    $('body').on('click', '.captcha', function(){
        alert('yolo');
        var id = Math.random();
        $(this).replaceWith('<img class="captcha" src="img/captcha.php?id='+id+'" />');
    });
});

$(document).ready(function(e) {
  $('body').on('click', '.captcha', function() {
    alert('yolo');
    var id = Math.random();
    $(this).replaceWith('<img class="captcha" src="img/captcha.php?id=' + id + '" />');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="captcha" src="img/captcha.php">

方法2:只需用新url更新img src属性,而不是替换整个元素.

$(document).ready(function(e) {
    $('.captcha').click(function(){
        alert('yolo');
        var id = Math.random();
        $(this).attr('src', 'img/captcha.php?id='+id);
    });
});

$(document).ready(function(e) {
  $('.captcha').click(function() {
    alert('yolo');
    var id = Math.random();
    $(this).attr('src', 'img/captcha.php?id=' + id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="captcha" src="img/captcha.php">

方法3:您也可以使用与之前相同逻辑的纯JavaScript完成它.

document.querySelector('.captcha').addEventListener('click', function() {
  alert('yolo');
  var id = Math.random();
  this.setAttribute('src', 'img/captcha.php?id=' + id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="captcha" src="img/captcha.php">

方法4:设置onClick元素属性并使用纯JavaScript处理click事件,您需要传递this参数以引用元素.

function captcha(ele) {
  alert('yolo');
  var id = Math.random();
  ele.setAttribute('src', 'img/captcha.php?id=' + id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="captcha" onclick="captcha(this)" src="img/captcha.php">

Answer 2

您的代码只工作一次的原因是因为带有验证码类的原始元素被替换并且不再检测到单击。

解决方案

一个干净的解决方案是替换图像的 src 而不是完整的元素。

工作示例

查询

  $(document).ready(function () {
        $("#changeThis").click(
            function () {
                changeImage();
            }            
        );
    });

function changeImage() {
   //we want whole numbers not numbers with dots here for cleaner urls
   var id = Math.floor((Math.random() * 1000) + 1);
   $('#changeThis').attr("src",'img/captcha.php?id='+id);
   //Not sure why you want to empty id though.
   id ='';
}

或在线：

$("#changeThis").click($('#changeThis').attr("src",'img/captcha.php?id='+Math.floor((Math.random() * 1000) + 1)));

HTML对于唯一元素使用 id="" 语法而不是 class=""，当多个元素可以具有相同的类时使用 class，id 是唯一元素的标识符。

<img class="captcha" id="changeThis" src="img/captcha.php">