jquery dynamic binding .on () sélectionner les parents ou les enfants?

Par exemple,

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

.on () lie “tr” avec le gestionnaire d’événements click. Le premier sélectionne les enfants et enregistre directement le gestionnaire d’événements clic. La seconde sélectionne le parent “tbody”, et sélectionne les enfants “tr” comme argument.

Sont-ils tous deux liaison dynamic? Ont-ils le même effet? Quelle est la différence entre ces deux?

Non, seule la deuxième version est une liaison dynamic.

Cela devrait être simple à comprendre. Quand vous avez un code comme:

 $(selector).method(arguments);

jQuery recherche tous les éléments qui correspondent au selector au moment de l’exécution du code et appelle la method sur eux à ce moment. Si vous exécutez ce code lors du premier chargement de la page, seuls les éléments correspondant au sélecteur sont trouvés dans le document initial. Si les éléments tr sont ajoutés dynamicment, la première version ne les trouvera pas et ne liera donc pas l’événement click à eux.

Lorsque vous utilisez .on() avec un sélecteur comme second argument, par exemple

 $(outerSelector).on(event, innerSelector, function...);

cela fonctionne comme suit. Il trouve tous les éléments qui correspondent à outerSelector et lie un gestionnaire pour l’événement à eux. ces éléments doivent exister lorsque vous appelez .on() . Lorsque l’événement se produit, le gestionnaire vérifie si la cible correspond à innerSelector , puis exécute votre fonction de rappel. Ceci permet à l’événement de fonctionner sur des éléments ajoutés dynamicment.

La règle générale est donc que outerSelector doit faire référence à un élément statique du document, tandis que innerSelector réfère aux éléments dynamics.

Ni est vraiment dynamic , pour ainsi dire.

Les éléments suivants lieront l’événement onclick à chaque #dataTable tbody tr de la page:

 $( "#dataTable tbody tr" ).on( "click", function() { /*event*/ });

L’autre liera un événement onclick à chaque #dataTable tbody de la page et l’événement ne se déclenchera que si l’un de ses descendants sur #dataTable tbody cliqué rencontre le sélecteur tr (voir Délégation d’événements ):

 $( "#dataTable tbody" ).on( "click", "tr", function() { /*event*/ });

La seconde peut être considérée comme dynamic car elle simule un onclick pour le sélecteur spécifié, qu’il existe ou non l’un de ces éléments au moment de la liaison. Mais techniquement, il s’agit d’un événement associé à #dataTable tbody .