jQuery로 동적으로 생성 된 요소를 선택하는 방법

Question

사용자 입력을 기반으로 일부 요소를 동적으로 업데이트하고 있습니다. 특히, 나는 페이지가로드 내가

$(whocares).click(callback); 

callback = function() { 
    var empties = $('.something input[value=""]); 
    var count = empties.length; //4 
} 

하지만 사용자가 새로운 채 웁니다 후

가, 카운트가 유지됩니다 ... 빈 얼마나 많은 셀 수 있습니다합니다. 사용자가 입력 할 양식 필드의 테이블이 같은.

DOM을 검사 할 때 업데이트 된 값이 표시되지 않습니다. 새로운 양식 필드는 여전히 value="whatever" 대신 value이라고 말합니다.

는 jQuery를 내가 jQuery를이 새로운 변화를 볼 수 있습니다 어떻게 $(document).ready();

안에 모든?

Answer 1

는 선택기의 [값 =] 표기 만, 폼 요소의 현재 상태와 일치하지 않는 특성 (.attr) 및 이러한 특성을 다루고 있지만 요소의 'value'속성

양식 요소의 속성 (.prop)만이 요소의 현재 값을 매핑합니다.

당신은 자세한 내용은 jQuery 1.9 upgrade guide을 읽을 수

$(":input").filter(function() { return $(this).val() === ""; }); 

를 통해 빈 요소를 얻을 수 있습니다.

Answer 2

당신은 트릭을 할해야

$(document).on("change", "youtInput.YourImputClass", function(){ 
    var count = $(document).find("youtInput.YourImputClass[value^='']").length; 
} 

같은 것을 사용할 수 있습니다.

희망이 도움이 될 것입니다. 행운을 비네.

Answer 3

이 코드 : jQuery를 1.9로서

var count = 0; 
$('.something input').each(function() 
    if($(this).val().length = 0) { 
     count++; 
    } 
}); 

Answer 4

우선 jQuery 선택기를 실행할 때 현재 DOM 상태를보고 선택기와 일치하는 요소를 찾도록 요청하는 것입니다. 변수를 jQuery 함수의 결과와 같게 설정하면 일치 된 DOM 요소를 나타내는 jQuery 요소의 배열로 끝납니다. 캐싱 된 변수에 액세스 할 때 을 입력하지 마십시오.은 일치하는 요소를 DOM에 다시 요청합니다.

var empties = $('.something input[value^=""]'); 
empties.length // 4; 

는 DOM 후, IE 상태를 변경하는 경우 : 그래서 예를 들면

는 이전 선택의 단지 캐시이기 때문에 당신이 입력 필드의 두 몇 가지 값을 넣어 empties.length 4 남아 - 그렇지 않아 선택을 다시합니다. 위해서는 당신이 다시 $('.something input[value^=""]').length을 선택을 할 필요가 지금 얼마나 많은 빈 상자 확인하는 것 지금 동일한 2.

그래서 여기에 해결책은 empties의 선택의 결과를 캐시하지만 단지 $('.something input[value^=""]').length를 호출하지 않는 것입니다 직접 실행될 때마다 DOM에서 바로 셀렉터 (이 예에서는 빈) 수와 일치하는 수를 제공합니다.