Estaba tratando de averiguar cuál es la diferencia entre
$(document).on('click', '#id', function(){});
y
$('#id').on('click', function(){});
No he podido encontrar ninguna información sobre si hay alguna diferencia entre los dos y, de ser así, cuál puede ser esa diferencia.
¿Alguien puede explicar si hay alguna diferencia?
on(). Solo un poco de lectura para hacer :)
Respuestas:
El primer ejemplo demuestra la delegación de eventos . El controlador de eventos está vinculado a un elemento superior en el árbol DOM (en este caso, el document) y se ejecutará cuando un evento alcance ese elemento que se originó en un elemento que coincide con el selector.
Esto es posible porque la mayoría de los eventos DOM burbuja hasta el árbol desde el punto de origen. Si hace clic en el #idelemento, se genera un evento de clic que se propagará a través de todos los elementos ancestros ( nota al margen: en realidad, hay una fase antes de esto, llamada 'fase de captura', cuando el evento desciende del árbol hasta el objetivo ). Puede capturar el evento en cualquiera de esos antepasados.
El segundo ejemplo vincula el controlador de eventos directamente al elemento. El evento seguirá burbujeando (a menos que lo evites en el controlador) pero como el controlador está vinculado al objetivo, no verás los efectos de este proceso.
Al delegar un controlador de eventos, puede asegurarse de que se ejecute para elementos que no existían en el DOM en el momento del enlace. Si su #idelemento fue creado después de su segundo ejemplo, su controlador nunca se ejecutaría. Al vincularse a un elemento que sabe que definitivamente está en el DOM en el momento de la ejecución, se asegura de que su controlador realmente se adjuntará a algo y se puede ejecutar según corresponda más adelante.
$(document).on('click', $('#id'), function()...¿cómo puedo usar $(this)para hacer referencia $('#id')? $(this)está haciendo referencia actualmente document, lo cual entiendo.
Considere el siguiente código
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
Ahora aqui va la diferencia
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
Ahora, ¿qué pasa si agregamos una myTask nuevamente?
$('#myTask').append('<li>Answer this question on SO</li>');
Hacer clic en este elemento de myTask no lo eliminará de la lista, ya que no tiene ningún controlador de eventos vinculado. Si en cambio lo hubiéramos usado .on, el nuevo artículo funcionaría sin ningún esfuerzo adicional de nuestra parte. Así es como se vería la versión .on:
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
Resumen:
La diferencia entre .on()y .click()sería que .click()puede que no funcione cuando los elementos DOM asociados con el .click()evento se agregan dinámicamente en un punto posterior, mientras que .on()se pueden usar en situaciones en las que los elementos DOM asociados con la .on()llamada pueden generarse dinámicamente en un momento posterior.