La primera forma, $("div#target span.green").on(), enlaza un manejador de clics directamente a los span(s) que coinciden con el selector en el momento en que se ejecuta el código. Esto significa que si otros spans se agregan más tarde (o se cambia su clase para que coincida), se han perdido y no tendrán un controlador de clics. También significa que si luego elimina la clase" verde " de uno de los tramos, su controlador de clics continuará ejecutándose-jQuery no realiza un seguimiento de cómo se asignó el controlador y comprueba si el selector sigue coincidir.

La segunda forma, $("div#target").on(), enlaza un manejador de clics con los div(s) que coinciden (de nuevo, esto es contra los que coinciden en ese momento), pero cuando se produce un clic en algún lugar del div, la función del manejador solo se ejecutará si el clic se produjo no solo en el div sino en un elemento secundario que coincida con el selector en el segundo parámetro a .on(), "span.verde". Hecho de esta manera, no importa cuándo se crearon esos tramos secundarios, al hacer clic sobre ellos se ejecutará el controlador.

So para una página que no está agregando o cambiando dinámicamente su contenido, no notará una diferencia entre los dos métodos. Si está agregando dinámicamente elementos secundarios adicionales, la segunda sintaxis significa que no tiene que preocuparse por asignarles controladores de clics porque ya lo ha hecho una vez en el padre.

La explicación de N3dst4 es perfecta. Basándonos en esto, podemos asumir que todos los elementos hijos están dentro del cuerpo, por lo tanto necesitamos usar solo esto:

$('body').on('click', '.element', function(){
    alert('It works!')
});

Funciona con evento directo o delegado.

Tangencial al OP, pero el concepto que me ayudó a desentrañar la confusión con esta característica es quelos elementos enlazados deben ser padres de los elementos seleccionados .

• Encuadernado se refiere a lo que queda de la .on.
• Selected se refiere al segundo argumento de .on().

La delegación no funciona como .find(), seleccionando un subconjunto de los elementos enlazados. El selector solo se aplica a elementos secundarios estrictos.

$("span.green").on("click", ...

Es muy diferente de

$("span").on("click", ".green", ...

En particular, para obtener las ventajas que @N3dst4 sugiere con "elementos que se crean en el futuro", el elemento enlazado debe ser un padre permanente. Entonces los niños seleccionados pueden ir y venir.

EDITAR

Lista de verificación de por qué delegada .on no funciona

Razones difíciles por las que $('.bound').on('event', '.selected', some_function) puede no funcionar:

1. El elemento enlazado no es permanente. Fue creado después de llamar .on()
2. El elemento seleccionado no es un hijo de un elemento enlazado. Es el mismo elemento.
3. El elemento seleccionado impidió burbujear de un evento al elemento enlazado llamando a .stopPropagation().

(Omitiendo razones menos complicadas, como un selector mal escrito.)

I wro te a post with a comparison of direct events and delegated. Comparo js puro pero tiene el mismo significado para jquery que solo lo encapsula.

La conclusión es que el manejo de eventos delegados es para la estructura DOM dinámica donde los elementos enlazados se pueden crear mientras el usuario interactúa con la página ( no hay necesidad de enlaces de nuevo ), y el manejo directo de eventos es para los elementos DOM estáticos, cuando sabemos que la estructura no cambiará.

Para más información y comparación - http://maciejsikora.com/standard-events-vs-event-delegation /

Usar manejadores siempre delegados, que veo que está muy de moda, no es la manera correcta, muchos programadores lo usan porque "debería usarse", pero la verdad es que los manejadores de eventos directos son mejores para alguna situación y la elección de qué método debe ser apoyado por el conocimiento de las diferencias.