Résumé des problèmes qui surviennent lors de la liaison d'éléments dynamiques avec jQuery on()_jquery

La méthode jQuery on() est une méthode officiellement recommandée pour lier des événements. Utilisez la méthode on() pour lier les événements spécifiés aux éléments dynamiques créés dynamiquement dans le futur, tels que l'ajout, etc.

Quand je l'utilisais avant, c'était toujours

$("").on('click','function(){ 
}') 

Plus tard, j'ai découvert que parfois il ne pouvait pas être lié (comme lorsque des éléments sont générés dynamiquement). Après avoir vérifié la documentation, j'ai trouvé que l'utilisation correcte devrait être

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

Veuillez également noter

Comme cette réponse reçoit beaucoup d'attention, voici deux conseils supplémentaires :

1) Lorsque c'est possible, essayez de lier l'écouteur d'événement à l'élément le plus précis, pour éviter une gestion d'événement inutile.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Faites attention, lorsque vous ajoutez un élément avec un identifiant, à vous assurer de ne pas l'ajouter deux fois. Non seulement il est "illégal" en HTML d'avoir deux éléments avec le même identifiant, mais cela casse beaucoup de choses. choses. Par exemple, un sélecteur "#c" ne récupérerait qu'un seul élément avec cet identifiant.

on(events,[selector],[data],fn)

événements : un ou plusieurs types d'événements séparés par des espaces et un espace de noms facultatif, tel que "click" ou "keydown.myPlugin".
sélecteur : chaîne de sélection pour les descendants du filtre de l'élément sélecteur qui a déclenché l'événement. Si le sélecteur est nul ou omis, l'événement est toujours déclenché lorsqu'il atteint l'élément sélectionné.

data : Lorsqu'un événement est déclenché, event.data doit être transmis à la fonction de traitement d'événement.

fn : La fonction exécutée lorsque l'événement est déclenché. La valeur false peut également être utilisée comme raccourci pour une fonction qui renvoie false.

Remplacer bind()

Lorsque le deuxième paramètre 'selector' est nul, il n'y a fondamentalement aucune différence d'utilisation entre on() et bind(), nous pouvons donc penser que on() a juste une option de plus que le paramètre 'selector' de bind() , ainsi de suite() peut facilement remplacer bind()

Remplacer live()

Avant la version 1.4, je pense que tout le monde aimait utiliser live() car il peut lier des événements à des éléments actuels et futurs. Bien sûr, après la version 1.4, délégué() peut également faire des choses similaires. Le principe de live() est très simple. Il délègue les événements via le document, on peut donc également utiliser on() pour obtenir le même effet que live() en liant l'événement au document.

Comment écrire en direct()

Le code est le suivant :

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

Méthode d'écriture on()

Le code est le suivant :

$(document).on('click', '#list li', function() {
//function code here.
});

La clé ici est que le deuxième paramètre « sélecteur » est en vigueur. Il agit comme un filtre et seuls les éléments descendants de l'élément sélectionné déclencheront l'événement.

Remplacer le délégué()

delegate() a été introduit dans la version 1.4, dans le but de déléguer les problèmes de liaison d'événements des éléments descendants via des éléments ancêtres. Dans une certaine mesure, il présente des avantages similaires à live(). C'est juste que live() est délégué via l'élément document, et le délégué peut être n'importe quel nœud ancêtre. La méthode d'écriture pour utiliser on() pour implémenter le proxy est fondamentalement la même que celle de délégué().

Comment écrire délégué()

Le code est le suivant :

$('#list').delegate('li', 'click', function() {
//function code here.
});

Méthode d'écriture on()

Le code est le suivant :

$('#list').on('click', 'li', function() {
//function code here.
});

Il semble que l'ordre des premier et deuxième paramètres soit inversé, mais tout le reste est fondamentalement le même.

Résumé

jQuery a lancé on() dans deux buts, l'un est d'unifier l'interface et l'autre est d'améliorer les performances, donc à partir de maintenant, utilisez on() pour remplacer bind(), live() et délégué. En particulier, n'utilisez plus live(), car il est déjà sur la liste obsolète et sera supprimé à tout moment. Si vous ne liez l’événement qu’une seule fois, puis utilisez one(), cela ne change rien.

La méthode jquery on() lie les éléments dynamiques

Plus de bêtises, laissez-moi juste vous poster le code.

<div id="test">
<div class="evt">evt1</div>
</div>

Mauvaise utilisation. La méthode suivante lie uniquement l'événement click au premier div avec la classe evt. Le div créé dynamiquement à l'aide de append n'est pas lié

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

L'utilisation correcte est la suivante :

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>