Jquery .on avec l’événement double clic

Pourquoi cela fonctionnerait-il?

$(document).on("dblclick", "#areaA tr:has(td)", function(e) { //code here }); 

et cela ne

 $("#areaA tr:has(td)").on('dblclick', function(e) { //Code here }); 

Je suis exactement l’exemple de la page de documentation de jquery, mais mon double clic ne se déclenche pas. Quand je le fais de la première façon, ça marche, mais il semble que l’événement soit déclenché deux fois.

C’est dans le contexte d’une grid du Kendo UI.

Y a-t-il vraiment une différence entre ces deux morceaux de code?

La principale différence est que la condition dans la première sera vérifiée chaque fois que vous cliquez. Donc, si l’élément avec id areaA ou tr ou td dedans est ajouté dynamicment, seul le premier peut fonctionner.

Y a-t-il vraiment une différence entre ces deux morceaux de code?

Oui. Le premier morceau de code est une forme de gestion des événements déléguée dans laquelle le gestionnaire est déclenché par des événements générés par le document et déclenchés par des éléments descendants. Le second lie un gestionnaire d’événement à l’élément renvoyé par jQuery pour le sélecteur désigné (dans ce cas, #areaA tr:has(td) ).

Voici les informations pertinentes de la documentation de jQuery:

Premier morceau de code:

Les événements delegates ont l’avantage de pouvoir traiter des événements à partir d’ éléments descendants ajoutés ultérieurement au document. En sélectionnant un élément dont la présence est garantie au moment de la connexion du gestionnaire d’événements délégué, vous pouvez utiliser des événements delegates pour éviter d’avoir à joindre et à supprimer fréquemment des gestionnaires d’événements.

Deuxième morceau de code:

Les gestionnaires d’événements ne sont liés qu’aux éléments actuellement sélectionnés. ils doivent exister au moment où votre code appelle .on ()

La première méthode que vous décrivez fonctionne parce que vous sélectionnez un parent statique, puis un enfant dynamic, qui suit les règles de liaison des événements aux éléments créés dynamicment avec la méthode .on.

Voici la syntaxe de la méthode .on , comme si vous aviez déjà étudié un peu.

 $(selector).on(event,childSelector,data,function,map) 

Donc, si je veux me lier à un élément dynamic avec .on , je dois d’abord sélectionner un élément parent statique puis, dans la méthode .on , sélectionner l’élément enfant dynamic. Dans votre cas, le cas d’utilisation correct fonctionnerait comme ceci:

 $("body").on('dblclick', '#areaA tr:has(td)', function(e) { //Code here }); 

Comme vous avez mentionné que cela ne fonctionnait pas, je suppose que #areaA n’est pas un élément statique. Vous pouvez remplacer le corps pour un élément statique plus pertinent, ou simplement le laisser corps, peu importe.