files - Jquery.on con doble click evento

jquery filedownload pdf

Question

¿Por qué funcionaría esto?

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

y esto no

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

Estoy siguiendo el ejemplo en la página de documentación de jquery exactamente, pero mi doble clic no se dispara. Cuando lo hago de la primera manera, funciona, pero parece que dispara el evento dos veces.

Esto está en el contexto de una cuadrícula de Kendo UI.

¿Hay realmente una diferencia entre estas dos piezas de código?

Answer 1

¿Hay realmente una diferencia entre estas dos piezas de código?

Sí. La primera parte del código es una forma de gestión de eventos delegada en la que el controlador se activa mediante eventos que burbujean el documento que fueron activados por elementos descendientes. El segundo es vincular un controlador de eventos al elemento real devuelto por jQuery para el selector designado (en este caso #areaA tr:has(td) ).

Aquí está la información relevante de la documentación de jQuery:

Primera pieza de código:

Los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior. Al elegir un elemento que se garantiza que esté presente en el momento en que se adjunta el controlador de eventos delegado, puede usar eventos delegados para evitar la necesidad de adjuntar y eliminar con frecuencia los controladores de eventos.

Segunda pieza de código:

Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en el momento en que su código realiza la llamada a .on ()

Answer 2

El primer método que describe funciona porque está seleccionando un padre estático y luego un hijo dinámico, que sigue las reglas de vincular eventos a elementos creados dinámicamente con el método .on.

Aquí está la sintaxis del método .on , que parece que ya has estudiado un poco.

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

Entonces, si quiero enlazar a un elemento dinámico con .on , .on debo seleccionar el elemento primario estático, luego, dentro del método .on , seleccionar el elemento secundario dinámico. En su caso, el caso de uso correcto funcionaría así:

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

Como mencionaste que no funcionaba, #areaA que #areaA no es un elemento estático. Puede reemplazar el cuerpo por un elemento estático más relevante, o simplemente dejarlo en el cuerpo, realmente no importa.

Answer 3

La principal diferencia es que la condición en la primera se comprobará cada vez que haga clic. Por lo tanto, si el elemento con ID areaA o tr o td dentro se agrega dinámicamente, solo el primero puede funcionar.