我有一个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">
作为第一次尝试,它有效,但之后如果我再次单击该字段,它将不再有效,我不知道为什么.
您正在用新元素替换 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">
您的代码只能工作一次的原因是,带有验证码类的原始元素被替换,并且不再检测到单击。
溶液
一个干净的解决方案是替换图像的 src 而不是完整的元素。
工作示例
Jquery
$(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">
可能只是将事件绑定到代码替换的元素时出现问题。请考虑改为将委托绑定到文档:
// Replace
$(document).ready(function(e) {
$('.captcha').click(function(){
// With
$(document).ready(function(e) {
$('.captcha').on('click', document, function(){
好的。问题是你声明了id
变量,并尝试在第二个函数调用中重新声明它,当已经有一个id
变量时,所以它将被静默地忽略,而是使用空字符串。
尝试将var id ='';
移出函数,并在函数中使用id = Math.random()
。
这是一个委派问题,因为您插入了一个新元素,因此删除了事件侦听器,因此有许多解决方案:
解决方案 1:
使用内联事件绑定
function rebindCaptcha()
{
var id = Math.random();
$(".captcha").replaceWith('<img onclick="rebindCaptcha()" class="captcha" src="img/captcha.php?id='+id+'" />');
}
解决方案 2:
将元素保留在 dom 中,只需更改 src 属性:
$(document).ready(function(e) {
$('.captcha').click(function(){
var id = Math.random();
this.src = 'img/captcha.php?id='+id+';
id ='';
});
});
仅供参考,jQuery委托可以通过以下方式完成:
$(".parent .child").on("event",function(){/*your handler here*/})
或
$(".parent").on("event",".child",function(){/*your handler here*/})
通常选择一个您确定它将始终存在于您的 dom 中的父级,并始终在文档就绪事件后附加侦听器。
,它的工作原理就像我说的那样,你必须在javascript中使用id来改变事情
// reload is your button reload and captcha must be a div who surrounding the captcha img
document.querySelector('#reload').addEventListener('click', function(e){
var reload = document.getElementById('captcha')
reload.innerHTML = "your new logic"
})
//reload.innerHTML 将成为新的验证码 html 代码
为了使用新代码加载图像,您可以使用 captcha.php 的版本参数。请参阅以下代码。
<img class="captcha" id="secure_code" src="img/captcha.php"> <a href="#" id="reload_captcha">Reload</a>
$(document).ready(function(e) {
$('#relaod_captcha').click(function(e) {
e.preventDefault() ;
$('#secure_code').attr('src', "img/captcha.php?ver="+Math.random()) ;
}) ;
}) ;
我希望它会有所帮助。