잘못된 선택기의 jQuery 클릭 기능

Question

선택기에 문제가 있습니다.

사실 저는 위젯을 쓰고 있습니다.

클래스를 변경하려면 두 번의 클릭 이벤트가 있어야합니다. 문제는 첫 번째 이벤트를 클릭하면 클래스가 변경된다는 것입니다.

<input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button"></span> 
ui-multiselect-costum-button 
ui-multiselect-costum-button-active 
<input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button-active"></span> 

<input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button-active"></span> 
ui-multiselect-costum-button-active 
ui-multiselect-costum-button-active 
<input type="checkbox" value="2" style="display: none;"><span class="ui-multiselect-costum-button-active"></span> 

왜 클릭 이벤트가 않습니다 :하지만 두 번째 클릭에, 항상 같은 클릭 이벤트로 이동, 심지어 잘못된 클래스 (선택)

  $(".ui-multiselect-costum-button",$(this)).click(function(){ 
       console.log($(this).parent().html()); 
       console.log($(this).attr("class")); 
       $(this).removeClass("ui-multiselect-costum-button").addClass("ui-multiselect-costum-button-active"); 
       console.log($(this).attr("class")); 
       console.log($(this).parent().html()); 
      }); 

      $(".ui-multiselect-costum-button-active",$(this)).click(function(){ 

       console.log($(this).attr("class")); 
       $(this).removeClass("ui-multiselect-costum-button-active").addClass("ui-multiselect-costum-button"); 
       console.log($(this).attr("class")); 
      }); 

콘솔 공연이있다 여물 ui-multiselect-costum-button-active가 아닌 항상 ui-multiselect-costum-button을 사용합니까?

고마워요.

Answer 1

플러그인을 초기화 할 때 클래스가있는 요소에 핸들러를 바인딩합니다. 는 동적 클래스 변경에 따라 수 있도록 당신은 이벤트 위임을 사용해야합니다

 $(this).on("click", ".ui-multiselect-costum-button", function(){ 
      console.log($(this).parent().html()); 
      console.log($(this).attr("class")); 
      $(this).removeClass("ui-multiselect-costum-button").addClass("ui-multiselect-costum-button-active"); 
      console.log($(this).attr("class")); 
      console.log($(this).parent().html()); 
     }); 

     $(this).on("click", ".ui-multiselect-costum-button-active", function(){ 
      console.log($(this).attr("class")); 
      $(this).removeClass("ui-multiselect-costum-button-active").addClass("ui-multiselect-costum-button"); 
      console.log($(this).attr("class")); 
     }); 

Answer 2

초기화 jQuery를 두 클래스에 클릭 이벤트를 할당 같은 시간에 바인딩, 의미

할당 클릭 이벤트 $(".ui-multiselect-costum-button",$(this)),

새로운 클래스 이름하지 않는 당신이 (- 활동하는 클래스 이름을 변경합니다 그 함수에있다)하지만, 이벤트를 클릭 일류 $(".ui-multiselect-costum-button",$(this)) 클릭해야합니다 때까지하지 않는 (".ui-multiselect-costum-button-active",$(this))에 그 assing 클릭 이벤트가 존재 이후에 존재합니다.

그래서 다시 새 수업을 클릭해야합니다. Barmar의 대답을 따르십시오.

Answer 3

클릭 대신 on을 사용해보십시오. 이벤트가 문서의 요소에 바인딩되어 해당 요소에로드됩니다. 이벤트에서 요소의 클래스를 변경하지만 이벤트가 문서로드시 해당 요소에 이미 바인딩되어 있으면 클릭을 사용하는 동안 이벤트가 클래스 변경시 다시 바인딩되지 않습니다.

Answer 4

도움 주셔서 감사합니다. 이벤트 위임이 작동했습니다. D

내 oppinio는 '클릭'이 동일합니다.