Pregunta $ (documento) .on ('clic', '#id', función () {}) vs $ ('# id'). on ('clic', función () {}) [cerrado]


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 es la diferencia.

¿Puede alguien explicar por favor si hay alguna diferencia?


75
2018-02-14 16:14


origen


Respuestas:


El primer ejemplo demuestra delegación de eventos. El controlador de eventos está vinculado a un elemento más arriba del árbol DOM (en este caso, el document) y se ejecutará cuando un evento llegue a ese elemento originado en un elemento que coincida con el selector.

Esto es posible porque la mayoría de los eventos DOM burbuja arriba del árbol desde el punto de origen. Si haces clic en el #id elemento, se genera un evento de clic que burbujeará a través de todos los elementos antepasados ​​(nota al margen: en realidad hay una fase anterior a esto, llamada 'fase de captura', cuando el evento baja del árbol al 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 impida en el controlador) pero como el controlador está vinculado al objetivo, no verá los efectos de este proceso.

Al delegar un controlador de eventos, puede asegurarse de que se ejecuta para los elementos que no existían en el DOM en el momento de la vinculación. Si tu #id Elemento fue creado después de su segundo ejemplo, su controlador nunca se ejecutará. Al enlazar a un elemento que sabe que está definitivamente 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.


58
2018-02-14 16:17



Considera seguir el código

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

Ahora, aquí va la diferencia

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

Ahora, ¿y si agregamos un myTask nuevamente?

$('#myTask').append('<li>Answer this question on SO</li>');

Al hacer clic en este elemento myTask no se eliminará de la lista, ya que no tiene ningún controlador de eventos vinculado. Si, en cambio, hubiésemos 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 eso .click() puede no funcionar cuando los elementos DOM asociados con .click() evento se agregan dinámicamente en un momento posterior, mientras .on() puede usarse en situaciones donde los elementos DOM asociados con .on() la llamada se puede generar dinámicamente en un momento posterior.


11
2018-02-14 16:24