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類選擇器不起作用

回答

相關問題