jQuery 자식 요소에 대한 콜백 설정

Question

#dim 하위의 모든 입력 요소에 onChange 콜백을 첨부하려고합니다. 그것은 3 개 입력 요소를 선택하지만, 예외 리턴 x는 jQuery를 오브젝트되지 않을 수 있기

Uncaught TypeError: Object 0 has no method 'change' 

그것은 될 수있다. 이 일을 어떻게하면 좋을까요?

function registercb() { 
    var sel = $("div.dim > input"); 
    for (x in sel) { 
     x.change(function() { 
      dosomething(); 
     }); 
    } 
} 

Answer 1

당신은 간단하게 수행 할 수 있습니다 볼 수있는

function registercb() { 
    $("div.dim > input").change(dosomething);    
} 

몇 가지에 대한 :

내부

• 그 반복 (이 사용하지 않는, 다음 포인트 참조) x DOM 요소는 .change() 메서드를 가진 jQuery 개체가 아니라 $(x) 같은 jQuery 개체로 래핑해야하지만 다시는 해당 개체가 아닙니다. 여기에 해결책을 제시하십시오.
• 가 for(...in...) 루프 대하여 반복 에 객체를 사용하지 않음 (JQuery와 객체 어레이 형상 인) 루프의 유형 열거위한 것이다.
• 대부분의 jQuery 함수 (거의 모두)는 두 개 이상의 요소에서 실행되므로 집합에서 실행하여 모든 요소에 영향을 주므로 .change() 중 하나입니다.
다음의 경우
• 당신은 그것이 어떻게 보이는지의 예입니다, 그것은 여기을이를 사용하지 않는, 당신의 인생을 훨씬 쉽게 만들 겠지만, .each() 체크 아웃, 루프 필요성을

예 :

function registercb() { 
    $("div.dim > input").each(function() { 
     $(this).change(dosomething);    
    }); 
} 

Answer 2

가정하여 'dim'div의 ID가 아닌 dim의 클래스가, 당신은 단순히이 작업을 수행 할 수 있습니다

$("#dim > input").change(function() { dosomething(); }); 

Working example. 당신은 당신이 .dim로 다스 려하고있는 코드 반면 #dim을 참조 텍스트에서

- ID로 # 선택하여 클래스에 의해 . 선택하므로 사업부의 형식 <div id="dim">에 있다면 당신은 어떤 일치하는 요소를 찾을 수 없습니다 선택자로 div.dim을 입력하십시오.

Answer 3

요소를 반복 할 필요가 없습니다. jQuery 객체는 컬렉션을 가지고 있다고 생각할 수있다. 당신이 할 경우 :

var sel = $("div.dim > input"); 

그것은 당신이 컬렉션의 모든 요소에 영향을 미칠 것입니다() 변경과 같은 방법을 실행할 때 sel가 그럼, 그 안에 모든 입력 요소를 가지고 있다는 것을 의미한다. 따라서 당신은 같은 것을 할 수 있습니다

function registercb() { 
    $("div.dim > input").change(function(){ 
    dosomething(); 
    }); 
} 

보너스 지식 :를 이제 문제는 당신이 for(x in sel)을하고 때 당신이 원하지 않는 jQuery 오브젝트 자체에 물건을 많이 받고 있다는 점이다. 당신이 원하는

for(x in sel){ 
    console.log(x); 
} 

가 대신 jQuery를이 일을 통해 당신에게 루프를 할 수있는 each이 있습니다 : 당신은 크롬에서 다음 코드를 실행하면 당신은 많은 예기치 않은 물건을 출력 볼 수

sel.each(function(index, item){ 
    console.log(item); 
}); 

당신이 할 수있는 심지어는 다른 것들에도 사용하십시오. 정말 편리합니다!

$([1,2,3]).each(function(index item){ 
    console.log(item); // 1,2,3 
})