Обработка кликов после изменения капчи

207

15 декабря 2016, 16:26

Скрипт обновления капчи:

$(function() { // обновление капчи без перезагрузки
    $("img#capt_reg").click(function() {
        $("div#captcha").html("<img width='90' height='25' id='capt_reg' src='captcha.php?anti_cache=" + Math.random() + "' style='margin-left: 28px; margin-bottom: -6px;\' > ");
        return false;
    });
});

HTML:

<div id="captcha" > 
    <img width="90" height="25" id="capt_reg" src="captcha.php?timestamp=<?php echo mktime();?>" style="margin-left: 28px; margin-bottom: -6px;" >
</div>

После загрузки страницы капчу по нажатию на картинку можно обновить только 1 раз.

Но если это событие повести на стороннюю картинку, то тогда капча обновляется сколько угодно раз.

Как сделать так, чтобы картинка капчи обновляла саму капчу постоянно, а не один раз?

Answer 1

Так как <img id="capt_reg"> каждый раз создаётся заново, то можно использовать delegated event handler.

$(function() { 
    var $captcha = $('#captcha'); 
    $captcha.on('click', '#capt_reg', function () { 
        $captcha.html("<img width='90' height='25' id='capt_reg' src='captcha.php?anti_cache=" + Math.random() + "' style='margin-left: 28px; margin-bottom: -6px;\' > "); 
        return false; 
    }); 
});

<div id="captcha" >  
    <img width="90" height="25" id="capt_reg" src="captcha.php?timestamp=123" style="margin-left: 28px; margin-bottom: -6px;" /> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Однако в данном конкретном случае разумнее просто менять src картинки:

$(function() { 
    $('#capt_reg').on('click', function() { 
        this.src = 'captcha.php?anti_cache=' + Math.random(); 
        return false; 
    }); 
});

<div id="captcha" >  
    <img width="90" height="25" id="capt_reg" src="captcha.php?timestamp=123" style="margin-left: 28px; margin-bottom: -6px;" /> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Ну очевидно потому что обновив капчу, вы перезатерли объект к которому применили событие click. Вам надо ли заново вешать click на картинку, либо применять click к другому объекту, который остается неизменным. Например к