Перерегистрировать события с помощью 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(), но из-за сложности моего проекта это на самом деле не все, что возможно.

Как я могу связать события после того, как будут созданы новые элементы, не отбрасывая анонимные функции, или это даже возможно?

Answer 1

Вы, наверное, хотите посмотреть на JQuery живых событий: http://docs.jquery.com/Events/live

Answer 2

Вариант 1:

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

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

Вариант 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 (рекомендуется):

http://docs.jquery.com/Events/live вместо привязки.

Answer 3

Нет необходимости в .live() или переустанавливать этот. Вам нужен только один метод:

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