클래스를 변경 한 요소의 이벤트 발생

Question

내가 잘못하면 죄송합니다. 처음으로 뭔가 묻습니다. 그리고 가난한 영어에 대해서도 유감입니다.

보세요, 문제가 있습니다. 나와 친구들을 위해서만 미니 소셜 네트워크를 만들고 있습니다. 이 jQuery/Ajax에 익숙하지 않아서 내 페이지가 너무 정적이어서 페이지를 새로 고쳤으며 무서운 것입니다. 그렇다면 나는 '다이나믹'한 것들을 배우기로 결심했고, 나는 그것에 문제가 있기 시작했다.

그래서 "Like-like"(하하) 버튼이있어서 "like (undo) like"버튼을 만들고 싶었습니다.

나는 내 문제를 시뮬레이션하려고합니다 : 내가 클릭하면

<a class="like">Like</a> 
$('.like').click(function(){ 
    //Like in database 
    $(this).html('Like(Undo)'); 
    $(this).removeClass('like'); 
    $(this).addClass('like-undo'); 
}); 

그래서, 그것은 '와 같은'집단 소송이 아닌 '와 같은-취소'를 트리거합니다. 아무도 도와 줄 수 있습니까? 나는 이미 죽어 가고있다.

한 번 더 잘못하면 죄송합니다.

Answer 1

이벤트 처리기는 요소에 바인딩됩니다. 요소의 클래스를 변경하면 바인딩 된 핸들러가 변경되지 않습니다. 다행스럽게도 이와 같은 상황에서는 event delegation을 사용하면 해당 동작을 얻을 수 있습니다.

$('some-common-container').on('click', '.like', function() { 
    //... 
}); 

$('some-common-container').on('click', '.like-undo', function() { 
    //... 
}); 

Answer 2

당신이 말했듯이 지금은 페이지가 다이나믹 (dinamic)입니다. 그래서 당신은 당신의 js에게 .like 클래스 트리거를 클릭하면 그 문제는 클래스를 제거한다는 것입니다. -undo 너무 쉬운 솔루션을 사용하면 클릭하면 무엇을 당신의 js를 표시하기 위해 다른 기능을 추가하는 .like-취소 클래스

$('.like').click(function(){ 
    //Like in database 
    $(this).html('Like(Undo)'); 
    $(this).removeClass('like'); 
    $(this).addClass('like-undo'); 
}); 

$('.like').click(function(){ //notice you do opossite acctions 
    //dislike in database 
    $(this).html('Like'); 
    $(this).removeClass('like-undo'); 
    $(this).addClass('like'); 
}); 

는 희망이 도움이! 것이다