jquery类选择器不起作用

我有一个输入字段，当它获得焦点时，我会添加一个类。如果失去了重点，则应该移除班级，并增加班级。jquery类选择器不起作用

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

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

来源

2012-07-18 AGuyCalledGerald

尝试...

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

当$（文件）。就绪被激发，没有与这两个类没有元素..

来源

2012-07-18 16:34:03 V1tOr

问题是你模糊事件结合一个还不存在的元素。

当你做$(document).ready它运行时，文档第一次加载，所以它会去找到一个元素.input.focus - 但没有该类的元素呢。

你需要在创建元素之后，或者通过使用jQuery住

你的代码与jQuery现场更改为低于使用添加该代码。的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;  
}

为您添加的文件准备好这个事件监听器.input.focus不会在文件准备存在您需要的.live（“模糊”，...选项更多。读此：http://api.jquery.com/live/

来源

2012-07-18 16:34:16 kieran

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。老版本的jQuery用户应优先使用.delegate（），而不要使用.live（）。 – j08691 2012-07-18 16:36:42

当您绑定的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-18 16:35:03 Blender

jquery类选择器不起作用

回答

相关问题