jQuery로 이벤트 다시 등록

Question

일부 프로젝트에서 jQuery를 통해 새로운 요소를 추가하고 있으며 약간의 번거로운 문제를 발견했습니다.

$('span.claim').click(function() { 
    $(this).parent().html('<span class="unclaim">Unclaim</span>'): 
}); 

$('span.unclaim').click(function() { 
    $(this).parent().html('<span class="claim">Claim</span>'): 
}); 

그리고 다음과 같은 마크 업 ... 초기 이벤트가 시작 된 후

<ul> 
    <li><span class="claim">Claim</span></li> 
    <li><span class="unclaim">Unclaim</span></li> 
    <li><span class="claim">Claim</span></li> 
    <li><span class="unclaim">Unclaim</span></li> 
</ul> 

불행하게도, 후속 이벤트가 처리되지 않습니다 :

는 다음과 같은 고려하십시오.

나는 완전히 구조 조정을하고 .bind() 함수를 사용할 수 있다는 것을 알았지 만, 내 프로젝트의 복잡성 때문에이 모든 것이 실현 가능하지는 않습니다.

익명 함수를 버리지 않고 새 요소를 만든 후에 이벤트를 다시 바인딩하는 방법은 무엇입니까?

$('a.claim').click(function() { 
    $(this).html('Unclaim').addClass('unclaim').removeClass('claim'); 
}); 

$('a.unclaim').click(function() { 
    $(this).html('Claim').addClass('claim').removeClass('unclaim'); 
}); 

옵션 2 : 1 http://docs.jquery.com/Events/live

Answer 1

바인드 대신 http://docs.jquery.com/Events/live

Answer 2

옵션 :

function bindClaim(){ 
$('a.claim').unbind('click').click(function() { 
    $(this).parent().html('<span class="unclaim">Unclaim</span>'); 
    bindUnclaim(); 
}); 
} 

function bindUnclaim(){ 
$('a.unclaim').unbind('click').click(function() { 
    $(this).parent().html('<span class="claim">Claim</span>'); 
    bindClaim(); 
}); 
} 

bindClaim(); 
bindUnclaim(); 

옵션 3 (권장) :

당신은 아마 jQuery를 라이브 이벤트에서보고 싶은

Answer 3

.live() 또는 다시 바인딩 할 필요가 없습니다. 한 가지 방법 만 필요합니다.

$('.claim,.unclaim').click(function() { 
    var claimed = $(this).hasClass('claim') ? 'Unclaim' : 'Claim'; 
    $(this).text(claimed).attr('class', claimed.toLowerCase()); 
});