Réenregistrer des événements avec jQuery

Question

J'ai ajouté de nouveaux éléments via jQuery dans certains de mes projets, et je suis tombé sur un problème encombrant.

Considérez ce qui suit:

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

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

Et le balisage suivant ...

<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> 

Malheureusement, après l'événement initial est tiré, aucun événement sont traités.

Je réalise que je pourrais complètement restructurer et utiliser la fonction .bind(), mais en raison de la complexité de mon projet, ce n'est pas vraiment possible.

Comment est-ce que j'irais relâcher les événements après que les nouveaux éléments aient été créés sans abandonner mes fonctions anonymes, ou est-ce même possible?

Answer 1

Vous voulez probablement regarder des événements en direct jQuery: http://docs.jquery.com/Events/live

Answer 2

Option 1:

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

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

Option 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(); 

Option 3 (recommandé):

http://docs.jquery.com/Events/live au lieu de lier.

Answer 3

Pas besoin de .live() ou de relier celui-ci. Vous avez seulement besoin d'une méthode:

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