javascript - jQuery 错误 : too much recursion

Question

我正在使用这个 watermark plugin对于 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() {。

我希望这就足够了。 :)