Question

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

<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;       
}

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

Answer 1

绑定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');
});

Answer 2

尝试...

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

当$（document）.ready被触发时，没有两个类的元素..

Answer 3

问题是你将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/live/ < / p>

jquery类选择器不起作用

3 个答案: