Las respuestas que he encontrado al respeto son en inglés, pero al tratar de interpretar la duda que tengo, sigo en las mismas... He leído que con una se propaga elementos secundarios, etc... La verdad, aún no tengo claro la diferencia, y en qué momento utilizar cuál. Gracias.
-
En qué código intentas usarlos? Las preguntas del tipo: "Tengo que hacer esto" sin mostrar el código que has escrito no suelen ser bien recibidas ya que la respuesta será siempre adivinando y no encaja en el formato de preguntas y respuestas del sitio. Recomiendo que hagas el recorrido para entender el funcionamiento y ya de paso ganar tu primera medalla. Por otro lado, estaría bien que le echaras un vistazo a Cómo preguntar para que tus preguntas reciban respuesta cuanto antes.– Alfabravoel 15 ago. 2019 a las 17:26
1 respuesta
La diferencia es que $(elemento).on()
enlaza la función al evento de los elementos (correspondientes al selector) actualmente en el documento, mientras que $(document).on()
implica que se enlazará la función al documento, afectando todos aquellos elementos que estén dentro del documento y que correspondan al selector que se envía como parámetro a la función $.on(evento, selector, callback())
, de manera que si se agregan elementos de forma dinámica al documento, también serán afectados por la función.
De la misma forma, también se puede utilizar con la sintaxis $(selector).on(evento, selector, callback())
:
$(document).ready(function(){
$('.tipo1').on('click',function(){
$('.contenedor1').append($('<button class="tipo1">No Funciona</button>'));
$(this).css('color','red');
});
// Afecta TODOS los elementos con la clase .tipo2
$(document).on('click','.tipo2',function(){
$('.contenedor2').append($('<button class="tipo2">También funciona</button>'));
$(this).css('color','red');
});
// Afecta unicamente los elementos con clase .tipo2 contenidos dentro de .contenedor3
$('.contenedor3').on('click','.tipo2',function(){
$('.contenedor3').append($('<button class="tipo2">Arriba y abajo</button>'));
$(this).css('color','red');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>$(elemento).on()</h1>
<div class="contenedor1">
<button class="tipo1">Funciona</button>
</div>
<h1>$(document).on()</h1>
<p>Estos elementos no afectan el contenedor de abajo.</p>
<div class="contenedor2">
<button class="tipo2">Funciona</button>
</div>
<h1>$(selector).on()</h1>
<p>Estos elementos también afectan el contenedor de arriba</p>
<div class="contenedor3">
<button class="tipo2">Funciona arriba y abajo</button>
</div>