Ошибка jQuery: слишком много рекурсии

Question

Я использую этот watermark plugin для jQuery. Он отлично работает на каждой странице, кроме моей регистрации, где он звонит 4 раза. На странице регистрации я получаю слишком большую ошибку рекурсии в строке 57 jQuery (один из которых размещен в Google). Я не думаю, что это проблема jQuery, хотя я думаю, что это связано с моим кодом или плагином. Можете ли вы посмотреть, видите ли вы что-нибудь?

Код:

$(document).ready(function(){ 
    $(".text").addClass("idleField"); 
    $(".text").focus(function(){ 
     $(this).removeClass("idleField"); 
     $(this).addClass("focusField"); 
    }); 
    $(".text").blur(function(){ 
     $(this).removeClass("focusField"); 
     $(this).addClass("idleField"); 
    }); 
    $("#recaptcha_response_field").attr("tabindex","5"); 
    <?php if(!is_ie()){ ?> 
    $("#username").watermark("Desired Username"); 
    $("#password").watermark("Password between 6 and 12 characters"); 
    $("#confirmPassword").watermark("Confirm Password"); 
    $("#email").watermark("Please insert a valid email"); 
    <?php } ?> 
    $("#checkUser").click(function(){ 
      $("#results").html("<img src='images/loading.gif' alt='loading...' />loading..."); 
     var user = $("#username").attr("value"); 
     $.get("library/regUserCheck.php", {name: user}, function(data){ 
      $("#results").html(data); 
     }); 
    }); 
    <?php if($error){ //Make error fade out ?> 
      $("#errorField").delay(5000).fadeOut(1250); 
    <?php } ?> 
}); 

Answer 1

Слишком много рекурсии в коде, не значит, что-нибудь для вас? Вот усовершенствованный код:

$(function() { 
    $(".text").addClass("idleField").focus(function() { 
     $(this).removeClass("idleField").addClass("focusField"); 
    }).blur(function() { 
     $(this).removeClass("focusField").addClass("idleField"); 
    }); 

    $("#recaptcha_response_field").attr("tabindex", "5"); 
    /*@cc_on 
    var $username = $("#username"); 
    $username.watermark("Desired Username"); 
    $("#password").watermark("Password between 6 and 12 characters"); 
    $("#confirmPassword").watermark("Confirm Password"); 
    $("#email").watermark("Please insert a valid email"); 
    */ 
    $("#checkUser").click(function() { 
     $("#results").html("<img src='images/loading.gif' alt='loading...' />loading...").load("library/regUserCheck.php", { 
      name: $username.val() 
     }); 
    }); 
    <?php if ($error) { /* Make error fade out */ ?> 
     setTimeout(function() { 
      $("#errorField").fadeOut(1250); 
     }, 5000); 
    <?php } ?> 
}); 

Советы:

• Вы можете использовать условные комментарии (/*@cc_on … */) для обработки IE, не нужно делать это с PHP.
• Никогда не используйте селектор jQuery несколько раз. jQuery нужно найти этот элемент в DOM несколько раз. В большинстве случаев, вы можете использовать цепочки, как это:

$('#el').click(function() { 
    … 
}).addClass('myClass');

Если вы не можете сделать это, кэш его переменной. Пример:

var $el = $('#el'); 
$el.html('loading…'); 
setTimeout(function() { 
    $el.load('/ajax/echo/html', {html: 'Hello, world!'}); 
}, 5000);

Например, если вы хотите указать несколько правил CSS для элемента, это лучший синтаксис:

$('#el').css({ 
    'background-color': 'blue', 
    color: 'white' 
});

• Это действительно зависит от стиля и не важно, но вы можете использовать $(function() { в виде стенографии для $(document).ready(function() {.

Надеюсь, этого достаточно. :)

Answer 2

Если проблема вызова watermark несколько раз я хотел бы попробовать использовать таймер:

$("#username").watermark("Desired Username"); 
window.setTimeout(function() { $("#password").watermark("Password between 6 and 12 characters"); }, 100); 
window.setTimeout(function() { $("#confirmPassword").watermark("Confirm Password"); }, 200); 
window.setTimeout(function() { $("#email").watermark("Please insert a valid email"); }, 300);