Jquery onload each loop EASY

Question

폼의 키 확인을위한 클래스 "keyup-an"에 대한 쉬운 keyup 함수가 있습니다. 이 클래스에는 약 10 개의 필드가 있습니다. 그러나 게시 후 필드에 양식을 추가합니다. 그러나 초록색과 적색의 배경은 사라져 버립니다. 어떻게 페이지로드에이 결과에 따라 배경 색상 것이다 각각

jQuery(document).ready(function() { 

$('.keyup-an').each(function(index) { 

    var inputVal = $(this).val(); 
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 
    if(!numericReg.test(inputVal)) { 
     $(this).css('background', '#FAC3C3'); 
     $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
    } 
    else { 
     $(this).css('background', 'lightgreen'); 
    } 
}); 


$('.keyup-an').keyup(function() { 
    $('span.error-keyup-1').hide(); 
    var inputVal = $(this).val(); 
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 
    if(!numericReg.test(inputVal)) { 
     $(this).css('background', '#FAC3C3'); 
     $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
    } 
    else { 
     $(this).css('background', 'lightgreen'); 
    } 
}); 

Answer 1

$('.keyup-an').each(function(index) { 

    var inputVal = $(this).val(); 
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 

    if(!numericReg.test(inputVal)) { 
     $(this).css('background', '#FAC3C3'); 
     $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
    } 
    else { 
     $(this).css('background', 'lightgreen'); 
    } 
}); 

Answer 2

당신이 같이 당신의 keyup 이벤트를 정의해야 이런 일을합니까. 당신의 요소가 dinamically 만든 형성하면 그건 그렇고, 당신은 나는 이것이 당신이 원하는 무엇을 생각 .on()

jQuery(document).ready(function() { 

$('.keyup-an').each(function(index) { 
    $(this).keyup(function() { 
     var inputVal = $(this).val(); 
     var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 
     if(!numericReg.test(inputVal)) { 
      $(this).css('background', '#FAC3C3'); 
      $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
     } 
     else { 
      $(this).css('background', 'lightgreen'); 
     } 
    }); 
}); 
} 

Answer 3

와 이벤트를 바인딩해야합니다 ..

는

$(document).ready(function() { 
    // Each 
    $('.keyup-an').each(function() { 
     // Validate 
     validate(this); 
     // Key up 
     $(this).keyup(function(){ 
      // Validate 
      validate(this); 
     }); 
    }); 
}); 


// Validate Function 
function validate(element) { 
    var obj = $(element); 
    if(!/^[a-zA-Z0-9_ ]{2,30}$/.test(obj.val())) { 
     // Invalid 
     obj.css('background', '#FAC3C3'); 
     if(!obj.next().hasClass('error')) 
     { obj.after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); } 
    } else { 
     // Valid 
     obj.css('background', 'lightgreen'); 
     if(obj.next().hasClass('error')) 
     { obj.next().remove(); } 
    } 
} 

데모 : http://jsfiddle.net/BerkerYuceer/q2ajM/