1

我有一个输入字段，当它获得焦点时我添加一个类。如果它失去焦点，则应删除该类并添加另一个类。

<input type="text" class="input" />

$(document).ready(function () {

        $(".input").focus(function () {
            $(this).addClass("focus");
        });

        $(".input.focus").blur(function () {
            $(this).removeClass("focus").addClass("error");
        });
});

.input.error
{           
    border: 2px solid Red;         
}

.input.focus
{           
    border: 2px solid Yellow;       
}

添加类工作正常，但不是模糊功能。问题是什么？

4

3 回答 3

2

当您绑定blur处理程序时，您的选择器 ( $(".input.focus")) 不会返回任何元素。

您需要绑定适用于当前和未来元素的动态处理程序：

$('body').on('blur', '.input.focus', function () {
  $(this).removeClass("focus").addClass("error");
});

为了提高速度，请替换body为这些元素的父容器。

虽然这对于聚焦和模糊来说有点过分。你可以尝试这样的事情：

$('.input').on('focus', function() {
  $(this).removeClass('error').addClass('focus');
}).on('blur', function() {
  $(this).removeClass('focus').addClass('error');
});
于 2012-07-18T16:35:03.993 回答
1

尝试...

$(".input").focus(..).blur(..);

当 $(document).ready 被触发时，两个类都没有元素..

于 2012-07-18T16:34:03.280 回答
1

问题是您将 blur 事件绑定到尚不存在的元素。

当你这样做$(document).ready时，它会在文档第一次加载时运行，所以它会去寻找一个元素.input.focus——但是还没有那个类的元素。

您需要在创建元素后添加此代码，或者使用 jQuery live

将您的代码更改为下面的代码，以便与 jQuery live 一起使用。JsFiddle 演示在这里：http: //jsfiddle.net/RDEXg/

<input type="text" class="input" />

$(document).ready(function () {

        $(".input").focus(function () {
            $(this).addClass("focus");
        });

        $(".input.focus").live('blur',function () {
            $(this).removeClass("focus").addClass("error");
        });
});

.input.error
{           
    border: 2px solid Red;         
}

.input.focus
{           
    border: 2px solid Yellow;       
}

您需要 .live('blur',... 选项，因为您要在文档就绪时添加此事件侦听器。.input.focus 在文档就绪时不存在。更多阅读：http: //api.jquery.com /居住/

于 2012-07-18T16:34:16.697 回答