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

Question

Я использую этот плагин водяных знаков для 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);