새 클래스를 추가 한 후 요소를 선택하면 작동하지 않습니다.

Question

한 번만 클릭되는 링크가 있습니다. 그래서 클래스를 링크에 추가하여 링크가 클릭되었는지 확인하고 사용자가 다시 클릭하지 못하도록합니다.

<a href="#" id="plus">my link</a> 

$("a#plus[class!='clicked']").on('click',function(e){ 
    e.preventDefault(); 
    alert('clicked'); 
    $(this).addClass('clicked'); 
}); 

그래서 클래스 '클릭'링크를 클릭하면 링크에 추가되고 사용자가 다시 클릭하면이

$("a#plus.clicked").on('click',function(e){ 
    e.preventDefault(); 
    alert('clicked before'); 
}); 

을 발생해야하지만 결과는 코드의 첫 번째 블록을 실행 여기에 추가 된 클릭 클래스 'http://jsfiddle.net/gkwym8nr/

Answer 1

jsfiddle 비록 당신의 핸들러는라고 당시 on()에 일치하는 요소에 부착된다. 나중에 클래스 추가/제거는 핸들러를 이동하거나 대체하지 않습니다. 이벤트 위임을 사용하면 현재 일치하는 요소를 기반으로 이벤트를 catch 할 수 있습니다.

$(document.body).on('click', "a#plus[class!='clicked']", function(e) { 
 
    e.preventDefault(); 
 
    $("span.result").text('link clicked'); 
 
    $(this).addClass('clicked'); 
 
}); 
 

 
$(document.body).on('click', "a#plus.clicked", function(e) { 
 
    e.preventDefault(); 
 
    $("span.result").text(' '); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<a href="#" id="plus">link</a> 
 
<span class="result"></span>