Comment utiliser les événements délégués?

J'utilise un événement pour remplacer les attributs "src" dans certaines couches ( <div class="total-title" src="anURL"> ):

 $('.playOnAP').on('click',function() { $('#mp3-list ul li',this).each( function( index, element ) { $('.total-title').eq(index).attr('src', $(this).text() ); });

Et il fonctionne la première fois, mais pas après une requête Ajax, lorsque les éléments $('.playOnAP') sont remplacés. Je suppose que je devrais utiliser les événements délégués , mais je ne me sens pas clair.

J'ai essayé le suivant:

 $('.playOnAP').on('click','#mp3-list ul li',function() { $('.playOnAP #mp3-list ul li').on('click',function() { $('.playOnAP #mp3-list ul li').on('click','#mp3-list ul li',function() {

Mais ne fonctionne pas.

Essaye ça:

 $(document).on('click', '.playOnAP',function() {

Lors de l'utilisation de la délégation d'événement, vous devez lier l'événement à un élément qui était à l'origine dans le DOM. Si quelque chose a été remplacé dynamiquement, vous ne pouvez pas vous lier à cela.

Comme Anup a mentionné avec précision, il n'est pas strictement nécessaire de lier l'événement de clic au document – tout élément parent fera, tant qu'il était à l'origine dans le DOM.

Par exemple, si .playOnAP est l'élément de conteneur le plus en haut qui est remplacé:

 <div id="someDiv"> <div class="playOnAP"> //some stuff here </div> </div>

Vous pourriez utiliser:

 $('#someDiv').on('click', '.playOnAP', function() { //do your stuff });

Par défaut, vous pouvez presque toujours utiliser $(document).on() (même s'il s'agit d'une vérification rapide pour s'assurer que tout fonctionne avant de réduire l'élément le plus approprié).

Vous devez placer le délégué sur un parent de .playOnAp si vous remplacez .playOnAp. Les gestionnaires d'événements ne se joignent qu'aux éléments DOM qui existent lorsque vous ajoutez le gestionnaire d'événements.