Buenas noches tengo una duda que no he podido resolver, estoy utilizando jQuer en uno de mis proyectos y estoy cargando una parte con ajax, bueno cualquier evento dentro del DOM funciona bien, el problema se presenta cuando ejecuto un evento a un elemento que fue cargado vía ajax. bueno un ejemplo.
$('element').click(function(){ /*funcion a ejecutar.*/ });
El problema:
(function($){
$(document).ready(function(){
$(document).on('click','elemento',function(){
/* funcion a ejecutar*/
});
});
})(jQuery);
El problema es que cuando le doy click a "elemento" con el método on(); se ejecuta la acción dos veces, esto lo averigüe cuando le coloqué un contador para que se pudiera ejecutar la acción solamente una vez
(function($){
$(document).ready(function(){
var inicio=0;
$(document).on('click','elemento',function(){
if( inicio == 0){
/*funcion a ejecutar*/
inicio++ /*cambio inicio para que solamente se ejecute una vez*/
}
});
});
})(jQuery);
Bueno con esto se puede resolver el problema cuando se hace un único click el problema es que esta función devenía de funcionar para diferentes elementos con la misma clase.
Alguien me puede decir en donde está el error en mi fragmento de código o una mejor forma de utilizar en evento click() con on(), o una forma diferente de acceder a elementos que fueron creados dinámicamente.
gracias.