我有一个
PHP脚本生成一个png图像,其中验证码为图像文本.
session_start();
$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
$captchanumber = substr(str_shuffle($captchanumber),8);
$_SESSION["code"] = $captchanumber;
$image = imagecreatefromjpeg("cap.jpg");
$black = imagecolorallocate($image,160,160);
$font = '../assets/fonts/OpenSans-Regular.ttf';
imagettftext($image,20,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">
作为第一次尝试,它的工作原理,但在那之后,如果我再次点击该字段,它将不再工作,我不知道为什么.
解决方法
您正在用新元素替换dom元素,它将销毁所有附加的事件处理程序.
方法1：您可以通过使用event delegation来监听动态添加的元素事件来解决此问题.
$(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',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事件,您需要将其作为参数传递以引用元素.
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">
