jquery 类选择器不起作用

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

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

您需要绑定(bind)一个适用于当前和 future 元素的动态处理程序:

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