여러 인스턴스에 대한 바인딩 전환

Question

내 토글 스위치에 switchify()를 사용하고 있습니다. 내 htmls에서 선택의 몇 가지있다 :

<select id="first"> 
<option value="on"> On </option> 
<option value="off"> Off </option> 
</select> 

<select id="second"> 
<option value="on"> On </option> 
<option value="off"> Off </option> 
</select> 

<select id="third"> 
<option value="on"> On </option> 
<option value="off"> Off </option> 
</select> 

을하고 난 스위치가 전환 될 때 무언가를하고 싶다. Jquery 코드는 다음과 같습니다.

$('select').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

이 코드는 첫 번째 선택에서만 작동합니다. 내가 seprately IDS는로 교체하는 경우 있지만, 그것은 잘 작동 : (: 태그 이름 선택 또는 클래스 선택 모두 같은 효과를 주)

는

$('#first').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

$('#second').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

$('#third').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

는

는 사람이 첫 번째 버전의 문제가 무엇인지 어떤 생각을 가지고 있습니까? switchify()에서 문제가 발생했기 때문입니까? 또는 나는 무엇인가 놓치고 있냐? 그것은 지난 두시간 동안 나를 미쳤다! :/

내가 문제를 설명하기 위해 jsfiddle에서이 예제를 만들어

: http://jsfiddle.net/yTRJh/ 당신이 첫 번째 스위치를 전환이 기록되는 것을 볼 수 있습니다!

Answer 1

당신은 사용할 필요가

$('select').switchify().each(function() { 
    $(this).data('switch').bind('switch:slide', function(e, type) { 
     $('ul').append('<li>Switching ' + type); 
    }); 
}); 

데모 : .data('switch') 첫 번째 선택의 data 요소를 반환하기 때문에 Fiddle

이있다.

리턴 데이터 (이름, 값)에 의해 설정된 바와 같이 jQuery를 컬렉션의 첫 번째 요소에 대한 명명 데이터 저장소에서의 값, 또는 데이터 - * HTML5 의해 속성.