jQuery错误：递归过多

Question

我将这个 watermark plugin 用于 jQuery。它在每个页面上都可以正常工作，除了我的注册被调用 4 次。在注册页面上，我在 jQuery 的第 57 行（托管在 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 } ?>
});

提示：

• 您可以使用条件 cmets (/*@cc_on … */) 来处理 IE，无需使用 PHP。
• 切勿多次使用 jQuery 选择器。 jQuery 需要多次在 DOM 中查找该元素。在大多数情况下，您可以使用 chaining，如下所示：

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