jQuery: comment remplacer .live avec .on?

Duplication possible:
jQuery 1.7 – Transformer live () en on ()

Selon l’API jQuery ( http://api.jquery.com/on/ ), la fonction ‘live’ est obsolète, il est recommandé d’utiliser plutôt «on». Mais lorsque je remplace ‘live’ par ‘on’ dans mon code, jQuery ne peut plus trouver d’éléments ajoutés ultérieurement:

Cela fonctionne (mais est déconseillé):

$('li.bibeintrag').live('click', function(){ alert('myatsortingbute =' + $(this).attr('myatsortingbute')); });

Ceci est un exemple de l’API pour ‘on’:

 $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); });

Lorsque je change mon code en ceci (“live” remplacé par “on”), il ne fonctionne plus (jQuery ne trouvera pas d’éléments ajoutés ultérieurement (par exemple avec append)):

 $('li.bibeintrag').on('click', function(){ alert('myatsortingbute =' + $(this).attr('myatsortingbute')); });

Qu’est-ce que je fais mal? Quelqu’un peut-il aider, s’il vous plaît?

Vous devez append un événement à tout élément parent de li.bibeintrag .

 $('ul').on('click', "li.bibeintrag", function(){ alert('myatsortingbute =' + $(this).attr('myatsortingbute')); });

Le live de jQuery, vu à travers le style $.on , aurait ressemblé à ceci:

 $(document).on("click", "li.bibeintrag", function(){ });

Il écouterait les événements de clic au niveau du document et déterminerait si leur cible correspondait au deuxième paramètre de $.on . Nous et moi sums encouragés à le faire nous-mêmes, mais plutôt que d’écouter au niveau du document, nous voulons écouter beaucoup plus près de l’élément lui-même (l’événement n’a donc pas besoin de se propager avant qu’il soit traité).

Puisque vous répondez aux clics sur un li , écoutez au niveau du parent de cet élément:

 $("ul#myList").on("click", "li.bibeintrag", function(){ /* Respond */ });

Gardez à l’esprit que sans fournir le second paramètre de $.on , le gestionnaire d’événement est lié à l’élément lui-même, ce qui signifie que vous n’obtenez pas le comportement de $.live qui réagirait aux éléments ajoutés dynamicment.

Cela devrait fonctionner

 $('ul').on('click','li.bibeintrag' function(){ alert('myatsortingbute =' + $(this).attr('myatsortingbute')); });