erreur jQuery: trop récursion

Question

J'utilise ce watermark plugin pour jQuery. Cela fonctionne bien sur chaque page sauf pour mon enregistrement où il est appelé 4 fois. Sur la page d'inscription, je reçois une erreur de récursivité trop importante sur la ligne 57 de jQuery (une hébergée sur Google). Je ne pense pas que ce soit le problème de jQuery, bien que je pense que cela a à voir avec mon code ou ce plugin. Pouvez-vous regarder pour voir si vous voyez quelque chose?

code:

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

récursion Trop dans votre code, ne veut rien dire pour vous? Voici le code amélioré:

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

Conseils:

• Vous pouvez utiliser des commentaires conditionnels (/*@cc_on … */) pour gérer IE, pas besoin de le faire avec PHP.
• N'utilisez jamais plusieurs fois un sélecteur jQuery. jQuery doit trouver cet élément plusieurs fois dans DOM. Dans la plupart des cas, vous pouvez utiliser enchaînant, comme ceci:

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

Si vous ne pouvez pas le faire, cache à une variable. Exemple:

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

Par exemple, si vous souhaitez spécifier plus des règles CSS pour un élément, c'est la meilleure syntaxe:

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

• Cela dépend vraiment de style et n'est pas important, mais vous pouvez utiliser $(function() { comme raccourci pour $(document).ready(function() {.

J'espère que ça suffit. :)

Answer 2

Si le problème appelle watermark plusieurs fois, je voudrais essayer d'utiliser la minuterie:

$("#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);