클래스 추가/제거가 작동하지만 새 클래스를 클릭하지 않는 경우

Question

나쁜 제목을 쓰는 것에 유감스럽게 생각합니다!

$(".add").click(function(event) 
{ 
    cid=event.target.id; 
    alert("add class changed"); 
    $("#"+cid).addClass("del"); 
    $("#"+cid).removeClass("add"); 
}); 


$(".del").click(function(event) 
{ 
    cid=event.target.id; 
    alert("del class changed"); 
    $("#"+cid).addClass("del"); 
    $("#"+cid).removeClass("add"); 
}); 

그리고이 같은 일부 HTML : 나는 "테스트"중 하나를 클릭하면

<a class="add" id="1" href="#">test a</a> 
<a class="add" id="2" href="#">test b</a> 
<a class="add" id="3" href="#">test c</a> 

내가 경고 "를 추가 클래스가 변경"얻고

나는 JS가 HTML은 클래스가 "del"로 변경되었음을 보여줍니다.

그러나 변경된 "테스트"중 하나를 클릭하면 del 클래스가있는 함수가 실행되지 않고 단지 하나만 추가됩니다.

따라서 클래스가 변경되고 그에 따라 표시되지만 해당 클래스에 대한 클릭 기능은 발생하지 않습니다. 어디서 잘못 알 수 있습니까?

편집 : "LIVE"이벤트가 필요합니다. 다음 코드는 작동 :

$(".add").live({ 
      click: function(event) 
       { 
        cid=event.target.id; 
        alert("add class changed"); 
        $("#"+cid).addClass("del"); 
        $("#"+cid).removeClass("add"); 
       } 
       }); 

Answer 1

$(".add")은 그 순간에서 가 add 클래스를 가지고 요소를 선택합니다. 클래스가 변경 될 때 click 이벤트가 다른 요소에 마술처럼 할당된다는 의미는 아닙니다.

그러나 JQuery live 메서드를 사용하여 이벤트를 바인딩하면이 작업을 수행 할 수 있습니다.