thực thi mã AFTER Recaptcha.reload() đã hoàn tất

Question

Tôi có một chức năng dưới đây được gọi để tải lại hình ảnh xác thực lại. Nó hoạt động, tải lại hình ảnh nhưng sẽ không làm bất cứ điều gì sau đó. Về cơ bản các hình thức là nhỏ mà có recaptcha này trên nó vì vậy tôi đã thu nhỏ nó và cho phép bấm vào để phóng to và tất cả những điều đó. Nếu người đó nhấn "lấy một hình ảnh xác thực khác" gọi hàm reloadCAP() nó sẽ kiểm tra xem nó có lớp là hình ảnh lớn hơn hay không. nếu nó tôi cần nó để thêm rằng lớp và css trở lại các yếu tố SAU hình ảnh mới đã được tải nhưng tôi dường như không thể làm cho nó hoạt động. Bất kỳ ý tưởng?

function reloadCAP() { 
    if($("#recaptcha_widget img").hasClass('largecap')) { 
     Recaptcha.reload(); 
     $("#recaptcha_widget img").addClass('largecap'); 
     $('#recaptcha_image').css('height', '62px'); 
    } else { 
     Recaptcha.reload(); 
    } 
} 

đây là html cho việc này:

<div id="recaptcha_widget" class="formRow" style="display:none;"> 
    <span class="f_label">Enter Words Below:</span> 
    <input type="text" class="setWidth" id="recaptcha_response_field" name="recaptcha_response_field" /> 

    <div class="cantread"> 
     <strong>Can't read this?</strong><br /> 
     <a href="javascript:reloadCAP()">Get another CAPTCHA</a> 
    </div> 

    <div id="recaptcha_image"></div> <!-- image loaded into this div --> 
     <div class="clear"></div> 
     <span class="smalltext">(click to enlarge)</span> 

     <br clear="all" /> 
    </div> 
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfzMMwSAAAAADV6D04jDE6fKwrJ57dXwOEW-vY3&lang=en"></script> 

Answer 1

$("#recaptcha_widget img").one('load',function(){ 
    $("#recaptcha_widget img").addClass('largecap'); 
    $('#recaptcha_image').css('height', '62px'); 
}); 

Điều này sẽ đặt một lần duy nhất người nghe về sự kiện load của hình ảnh mà bạn đang tải lại và sau đó thực thi mã folowing.

tôi đã sử dụng .one() thay vì .load() đây bởi vì bạn không muốn đính kèm một listener mới mỗi khi bạn gọi reloadCAP()

Sửa

Ok, vì vậy đây là những gì tôi tin rằng vấn đề là. Khi bạn gọi Recaptcha.reload(), nó sẽ xóa <img /> và thay thế bằng một hình mới. Vì vậy, khi chúng tôi đang cố gắng đính kèm sự kiện, nó sẽ bị xóa khi hình ảnh bị xóa.

Những gì bạn cần để làm nơi là lớp largecap trên recaptcha_image div và sửa đổi phong cách css của bạn trông giống như

.largecap img { 
    height: whatever; 
    width: whatever; 
} 

Answer 2

Không phải là giải pháp lý tưởng, nhưng bạn có thể đặt mã addClass trên Recaptcha.reload() và chỉ trì hoãn nó bằng một hoặc hai giây.

Hy vọng điều đó sẽ hữu ích.

Answer 3

Nghe có vẻ giống như những gì bạn thực sự cần là tùy chỉnh theming như vậy mà bạn có thể tạo kiểu captcha/image/etc chính xác khi cần: https://developers.google.com/recaptcha/docs/customization

Nếu bạn muốn thực hiện thao tác hiện tại, bạn có thể móc vào các hàm gọi lại được xây dựng (và không có giấy tờ) của Recaptcha trước khi gọi Recaptcha.create().

//Called after Recaptcha.reload() is finished loading 
Recaptcha._alias_finish_reload = Recaptcha.finish_reload; 
Recaptcha.finish_reload = function (challenge, b, c) { 
    //Call original function that creates the new img 
    Recaptcha._alias_finish_reload(challenge, b, c); 

    $("#recaptcha_widget img").toggleClass('largecap', true); 
} 

//Called when the initial challenge is received on page load 
Recaptcha._alias_challenge_callback = Recaptcha.challenge_callback; 
Recaptcha.challenge_callback= function() { 
    //Call original function that creates the new img 
    Recaptcha._alias_challenge_callback(); 

    $("#recaptcha_widget img").toggleClass('largecap', true); 
} 

Lý do bạn thậm chí gặp phải vấn đề này là do Recaptcha phá hủy và tạo một img mới mỗi lần tải lại, do đó kiểu dáng bạn thêm theo cách thủ công sẽ bị mất.