Question

我正在尝试使用.toggleClass处理一个表单，我有多个文本/输入，但它不按照我想要的方式工作。我希望页面上的所有输入[type =“text”]字段都具有此功能。有些字段是静态的，有些字段是使用.append和.live添加的，这些字段无法正常工作。基本上我想要一个适用于所有静态或动态字段的函数。

代码无效

$(document).ready(function(e) {
   $(this).live('focusin, blur', function() {
        $(':input[type="text"]').bind('focusin blur', function() {
        $(this).toggleClass('fieldFocus');  
        })
    });
});

适用于静态

$(':input[type="text"]').bind('focusin blur', function() {
        $(this).toggleClass('fieldFocus');
    });

我确定这是一个基本问题，但对于我的生活，我无法理解。

任何帮助都会很棒！谢谢！

作品！

$(document).ready(function(e) {
        $(':input[type="text"]').live('focusin blur', function() {
        $(this).toggleClass('fieldFocus');  
        });
    });
});

Answer 1

来自live() docs：

字符串可以包含多个空格分隔的事件类型或自定义事件名称

您目前正在使用逗号：）

（.live('focusin, blur'应为.live('focusin blur'）

Answer 2

$(':input[type="text"]').live('focusin blur', function() {
    $(this).toggleClass('fieldFocus');
});

修改
只是为了注意 - jQuery 1.7引入了新的事件接口，上面的例子看起来像这样：

$(document).on('focusin focusout', ':text', function(){ $(this).toogleClass('fieldFocus'); });

它还使用 scumah 指出的快捷:text和 Bryan Ross 指出的focusout，并且由于事实， blur在IE中没有冒泡（jQuery使用focusout来解决这个问题。）

注意，代替document你应该使用另一个元素 - 最好的是你正在填充AJAX的容器。

Answer 3

此代码应该有效，请查看此问题：http://jsfiddle.net/W83Du/

$(':text').live('focusin blur', function() {
    $(this).toggleClass('fieldFocus');  
});

Answer 4

通常，focusin事件与focusout配对，focus与blur配对。此外，在调用live时，请使用空格而不是逗号分隔要附加的事件，如下所示：

$(this).live('focusin focusout')

而不是

$(this).live('focusin, focusout')

.toggleClass不能使用.live

代码无效

适用于静态

作品！

4 个答案: