Reload captcha image

Question

I have a php script which generates a png image with a captcha code as image text.

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);

I want to reload the image via jQuery or JavaScript,so i'm using something like this:

$(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 ='';

    });
});

the field:

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

As the first attempt,it works , but after that if i click on the field again it won't work anymore and i have no idea why .

Pranav C Balan · Accepted Answer · 2016-06-11T06:52:18.297

You are replacing the dom element with new element, it will destroy all attached event handlers.

Method 1: You can resolve this by using event delegation to listen dynamically added elements event.

$(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">

Method 2: Instead of replacing entire element just update the img src attribute with new url.

$(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">

Method 3: Also you can get it done with pure JavaScript with same logic as previous.

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">

Method 4: Setting onClick attribute to the element and handling the click event with pure JavaScript, where you need to pass this as argument to refer the element.

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">

score 5 · Answer 2 · edited May 23 '17 at 12:32

The reason your code only works once is because the original element with captcha class is replaced and the click is no longer detected.

Solution

A clean solution would be to replace the src of the image instead of the complete element.

Working example

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 ='';
}

Or in oneline:

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

HTML For unique elements use the id="" syntax instead of class="", class is used when multiple elements can have the same class, id is an identifier for a unique element.

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

score 3 · Answer 3 · edited May 23 '17 at 12:08

3

Might just be a problem with binding events to elements that your code replaces. Consider delegate binding to the document instead:

// Replace
$(document).ready(function(e) {
    $('.captcha').click(function(){
// With
$(document).ready(function(e) {
    $('.captcha').on('click', document, function(){

edited May 23 '17 at 12:08

Community

1
1

answered Jun 04 '16 at 13:26

Brian

7,394
3
25
46

1

Based on the documentation here http://api.jquery.com/on/, you should write: $(document).on('click', '.captcha', function() { ... } ). The element that is added later to the document is passed as 2nd argument, not vice versa – Muhammad Alvin Jun 08 '16 at 07:57

score 0 · Answer 4 · answered Jun 04 '16 at 13:26

0

Okay. The problem is that you declare the id variable, and you try to redeclare it in the second function call, when there already is an id variable, so it will silently be ignored and the empty string used instead.

Try moving var id =''; out of the function, and use id = Math.random() in the function.

answered Jun 04 '16 at 13:26

Rápli András

3,869
1
35
55

The problem is he replaces the complete element which has a direct binding, by replacing it the binding with the function isnt valid anymore, a delegated binding would fix it. – Sven van den Boogaart Jun 04 '16 at 14:41

score 0 · Answer 5 · answered Jun 04 '16 at 13:39

This is a delegation issue, as you have inserted a new element, so the event listener is removed, there are many solutions:

Solution 1:

Use inline event binding

function rebindCaptcha()
{
var id = Math.random();
        $(".captcha").replaceWith('<img onclick="rebindCaptcha()" class="captcha" src="img/captcha.php?id='+id+'" />');
}

Solution 2:

Keep your element in dom, and just change the src attribute:

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

      });
  });

Just for your reference, jQuery delegation can be done with like:

$(".parent .child").on("event",function(){/*your handler here*/})

or

$(".parent").on("event",".child",function(){/*your handler here*/})

Usually pick a parent that you are sure it will always exist in your dom, and always attach listener after document ready event.

score 0 · Answer 6 · answered Jun 06 '16 at 17:02

For me its working as i say you have to use id in javascript for changing things

// 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 gonna be the new captcha html code

score 0 · Answer 7 · answered Jun 10 '16 at 13:44

In order to load the image with new code, you can use version paramter for captcha.php. See the following code.

<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()) ;
    }) ;
}) ;

I wish it will help.

Reload captcha image

7 Answers7