배열에서 jQuery bind 또는 addEventListener를 사용하는 방법은 무엇입니까?

Question

라디오 입력의 모든 흐림이나 클릭 또는 초점 이벤트에서 라디오 입력 값을 확인하고 싶습니다.

function getCheckedVal(){ 
    var checked = $('#education_number input:radio:checked') 
    console.log(checked.val()); 
}; 

이되어 있지 작품 :

window.onload = function(){ 
    var radio = $('#education_number input:radio'); 
    for(var i=0; i<radio.length; i++){ 
     radio[i].addEventListener('blur', function(){getCheckedVal()}); 
     }; 
    } 

그리고 이것은 예외가 인상이다

window.onload = function(){ 
    var radio = $('#education_number input:radio'); 
    for(var i=0; i<radio.length; i++){ 
     radio[i].bind('blur', getCheckedVal()); 
     }; 
    } 

Uncaught TypeError: Object #HTMLInputElement has no method 'bind'

어떻게 그렇게 할 수 있습니까?

Answer 1

, 당신은 이 bind에 반환 값을 통과 한 후getCheckedVal를 호출하고있어. 당신은 원하지 않는 ()getCheckedVal 후 :

window.onload = function(){ 
    var radio = $('#education_number input:radio'); 
    for(var i=0; i<radio.length; i++){ 
     $(radio[i]).bind('blur', getCheckedVal); 
    } 
} 

을 (radio[i] 원시 DOM 요소가 아닌 jQuery를 객체이기 때문에, 내가 radio[i] 주위 $(...)을 추가합니다.)하지만 극적으로 그 코드를 단순화 할 수 있습니다 :

window.onload = function(){ 
    $('#education_number input:radio').blur(getCheckedVal); 
} 

jQuery는 매우 집합 기반입니다. 직접 세트를 반복하지 않고 일치하는 요소 세트 전체를 조작 할 수 있습니다.

두 가지하지만, 고려는 :

• 당신은 정말는 흐림이 정보를 원하십니까
  ? 예를 들어 change에 없습니까?
• window#load 이벤트가 이벤트 처리기를 연결하기까지 기다리고 싶습니까? 즉, 페이지로드 프로세스에서 늦게 이고 이미지가 모두 인 경우이 완료된 것입니다. window#load을 사용하는 대신 끝에 스크립트를 넣거나 </body> 태그를 닫기 전에 또는 jQuery의 ready function을 사용하십시오.

Answer 2

bind는 jQuery를 방법입니다,하지만 당신은이 단계에서 가진 전부는 HTMLInputElement입니다 - 다행히도, 당신이 jQuery를에 요소를 통과하고 모든 기능에 액세스 할 수 있습니다 :

변경 :

radio[i].bind('blur', getCheckedVal()); 

$(radio[i]).bind('blur', getCheckedVal); 

에 당신은 또한 getCheckedVal에서 괄호를 제거해야 -에 getCheckedVal()를 통과 10을 사용하면 함수가 즉시 평가되고 반환 값만 이벤트에 바인딩됩니다. 대신 함수 참조를 bind으로 전달해야합니다.

Answer 3

그것은 그냥 다음 getCheckedVal 후 () 누락

$('#education_number input:radio').bind('blur', getCheckedVal); 

참고. 참조을 함수에 전달해야하며 이 아니라 함수를 호출해야합니다.

기본 사항에 대해 알아 보려면 jQuery tutorials 중 하나를 읽는 것이 좋습니다.

jQuery의 큰 장점 중 하나는 HTML 요소 모음에서 쉽게 작업을 수행 할 수 있다는 것입니다. $('selector')은 항상 jQuery 객체를 반환하므로이를 활용할 수 있습니다. DOM 요소의 순수한 배열이 있다면 그렇습니다.이 요소를 반복하여 이벤트 처리기를 개별적으로 바인딩해야합니다. 두 번째 예에서