[SOLUCIONADO] Problema con el metodo ajax con jquery

[Literman]

Hola Genios, espero puedan ayudarme con eso y también espero dame a entender lo mejor posible. Se los cuento en resumen y luego al retalle:

Llamo a una lista de registro desde una base de datos y los cargo en una etiqueta DIV, utilizando el método AJAX con Jquery y el llamado a la base de datos con PHP y Mysql.

Luego en esa lista hay un botón con un evento que llamo desde jquery, digamos que el evento es un simple alert. Este evento es lo que no funciona, pero si lo hago sin la lista de registros por Ajax funciona correctamente.


RE RESUMEN:

Lista de registros (Ajax+Jquery+PHP+Mysql): muestra botones
Evento de cada boton: muestra un alert - NO FUNCIONA

Ojala alguien sepa como resolverlo y me pueda ayudar con mucha paciencia.

Este es el ejemplo: http://miwebparaventas.com/demo-rinti/historias2.html
Al final hay un boton en el mismo html y si funciona.

Copio los códigos.

Apoyenme por favor. Gracias

HTML

Código:

<div id="lista-historias"></div>

AJAX + JQUERY

Código:

        $(document).ready(function(){			
		$.ajax({
				type: "POST",
				url: "modulos/get-historias-cero.php",
				success: function(data)
				{
					$('#lista-historias').html(data);
				}
		});
		return false;
	});

PHP + MYSQL (get-historias-cero.php)

Código:

<?php include "conexion.php"; ?>
<?php
	$consultaProg = "SELECT * FROM historias WHERE estado='A' ORDER BY codigo ASC";
	$ejecutarConsultaProg = mysql_query($consultaProg);
	while ($filaProg = mysql_fetch_array($ejecutarConsultaProg)){					
		$xCodigo		=	$filaProg['codigo'];
		$xNombre		= 	utf8_encode($filaProg['nombre']);
		$xDni			= 	$filaProg['dni'];
		$xEmail			= 	$filaProg['email'];
		$xMensaje		= 	utf8_encode($filaProg['descripcion']);
		$xFecha			= 	$filaProg['fecha'];
		$xHora			= 	$filaProg['hora'];
		$xEstado		= 	$filaProg['estado'];
		$num++;
		
		if( $num%2==0){
			$status = "par";
		} else {
			$status = "inpar";
		}
?>

    <article id="bloq-historias<?php echo $num;?>" class="bloq-historias <?php echo $status;?>">
        <h2><?php echo $xNombre;?></h2>
        <p><?php echo $xMensaje;?></p>
        <a href="#" class="btn-compartir" data="<?php echo $xCodigo;?>">COMPARTIR</a>
    </article>

<?php
	}
?>

JQUERY EVENTO EN BOTON CON ALERT - ESTE NO FUNCIONA -

Código:

$('.btn-compartir').click(function(){
	alert("HOLA MUNDO")
})

[xfxstudios]

prueba asi:

Código Javascript:

$('.btn-compartir').on('click', function(){
    alert("HOLA MUNDO")
})
 

[Literman]

HOla xfxstudios, lo apliqué y sigue sin funcionar, si tienes alguna otra idea sería bienvenida.

Saludos.

[osmaymoya]

pudieras poner la pagina html completa? Por lo que pude ver me parece que no defines el ready de jquery en la pagina, te recomiendo pruebes ponerlo ahi y dentro del ready pones el on click de los botones con clase btn-compartir, si lo haces quítale el return false al ready

[Literman]

Ya lo solucioné, el problema es bastante frecuente pero la solución no.

El problema es que no aplicaban los eventos jquery a resultados de listas llamadas por ajax, por la sensilla razón de que no existian en el DOM desde el principio.

La solución era aplicar el evento jquery indicando en el selector una etiqueta padre, que ya estaba por encima del contenedor, es decir por ejemplo en mi caso utilizando on:

$('#padre #contenedor').on('click','.btn-compartir', function(){
alert("HOLA MUNDO")
})

Saludos.