On en jquery

[ivan_teruel92]

Os pongo en situacion, al pretar un boton ejecuto la funcion nuevoTag que crea un elemento .tag dentro de #tagsSeleccionados como veis en la funcion. En un principio no hay ningun .tag hasta que se ejecuta por primera vez.

quiero que cuadno se ejecute nuevoTag y se cree el .tag se le asocie el evento que veis.. el alert por ejemplo



No funciona esto:

Código Javascript:

function nuevoTag(tag)
   {
       $("#tagsSeleccionados").append("<div class='tag'><input type='hidden' name='tags[]' value='"+tag+"'>"+tag+"<img src='' alt='Eliminar'></div>");
      
       
    }
   
$("#tagsSeleccionados .tag").on("click",function(){alert("elimi");});
 

me funciona esto:

Código Javascript:

function nuevoTag(tag)
   {
       $("#tagsSeleccionados").append("<div class='tag'><input type='hidden' name='tags[]' value='"+tag+"'>"+tag+"<img src='' alt='Eliminar'></div>");
       $("#tagsSeleccionados .tag").off("click");
       $("#tagsSeleccionados .tag").on("click",function(){alert("elimi");});
    }
 

por lo que tenia entendido al usar on de jquery pillaba automaticamente los cambios... que falla??

[Dnielf]

Para el método on se requiere que el elemento al que se le asigna el evento exista en el DOM, ya luego puede colocar que tipo de nodos hijos son los que propagan el evento, esto para evitar asignar events listeners a muchos elementos y mejor resumirlos a una propagación a su elemento padre, es decir es mejor que 1000 <li> propaguen su evento al padre que a cada <li> se le asigne el event listener (similar a un ejemplo en la documentación).

Con lo que tu código sería así :

Código Javascript:

$("#tagsSeleccionados ").on("click",".tag",function(){alert("elimi");});
 

[ivan_teruel92]

gracias perfecto ;)

[masterblink]

Excelente explicación, me funcionó perfecto el método on. Gracias