Subtilité dans l’utilisation du .on() de jQuery

Depuis jQuery 1.8.1, une petite subtilité est venue se greffer au gestionnaire d’événements .on(), j’avais d’ailleurs rédigé un article vous expliquant comment l’utiliser.

Il est d’ailleurs indiqué dans le changelog :

jQuery.on() selector should only apply to descendants of the element

Qu’est-ce que ça change ?

Considérons le HTML suivant :

<div id="container"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Considérons un ajout de DOM :

$('#container').append('<span class="test">test</span>');

Jusqu’à jQuery 1.8.0 on pouvait binder un événement click de cette manière :

$('#container').on('click', '#container span.test', function() {
    console.log('ok');
});​

Depuis jQuery 1.8.1 il faut faire comme ceci :

$('#container').on('click', 'span.test', function() {
    console.log('ok');
});​

Notez bien qu’il n’y a plus besoin de répéter l’élément « parent » dans le second sélecteur.

Et bien sûr c’est toujours le cas avec jQuery 1.8.3 sorti tout récemment. ;)

J’espère que ça pourra aider quelques uns qui ont pu s’arracher les cheveux au passage de version. N’oubliez pas de modifier vos codes.

Vous aimerez aussi...