jQuery 错误：太多递归

Question

我正在使用这个水印插件用于 jQuery。它在每个页面上都运行良好，除了我的注册，它被调用了 4 次。在注册页面上，我在 jQuery（托管在 Google 上的一个）的第 57 行收到太多递归错误。我不认为 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);