동적으로 추가되는 클래스의 이벤트

Question

요청의 출처에 따라 단추의 클래스가 동적으로 변경되는 양식이 있습니다. onclick 이벤트를 캡처하려고하지만 동적으로 추가 된 클래스는 사용하지 않습니다. 클래스에 단추가 추가되었는지 확인했습니다. 어디에서 잘못 될 수 있습니까?

조각 -

$('.button').removeClass('oldClass'); 
    $('.button').addClass('newClass'); 

    <button class = "button">Button</button> 

의 OnClick - 버튼 클래스가합니다 NewClass로 변경 되더라도

 $('.newClass').click(function(){ 
      alert("test"); 
    }); 

코드는이 이벤트 이벤트에 도착하지 않습니다.

덕분에 당신이 요소가 다른 클래스가 클릭 이벤트를 바인딩

Answer 1

그게 원인. 이 같은

해보십시오 somesthing은 : .bind 같은 방법 (또는 .click 같은 바로 가기)를 통해 이벤트 핸들러를 설정

$('body').on('click', '.newClass', function() { 
     alert('test'); 
    }); 

Example

Answer 2

은 현재 셀렉터에 일치하는 요소에 대해 설정됩니다. 현재 일치하는 요소와 이후의 모든 일치 요소에 대한 이벤트 처리기를 설정하려면 .on을 사용해야합니다.

Answer 3

DOM이로드 될 때 버튼에 직접 클릭 기능을 추가하고 .hasClass()을 사용하여 newClass가 적용되었는지 여부를 확인할 수 있습니다.

$('.button').click(function() { 
    if($(this).hasClass('newClass')) { 
     //Code for new class click 
     alert('test'); 
    } 
}); 

JSFiddle는 :

Answer 4

http://jsfiddle.net/yRySK/1/는 I JQuery와 의해 제공된 위임 방법을 이용하여 문제를 해결.

$('body').delegate('.newClass','click', delegatefunction); 

function hasClass() { 
    alert("Hello!!"); 
} 

도움 주셔서 감사합니다.