[SOLUCIONADO] No ejecuta Funcion :(

KalSmith · #1 (**permalink**) 12/09/2016, 21:42

Estimados
Estoy creando un buscador de productos, el cual tiene el siguiente codigo

Código HTML:

<?php 
session_start();


?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Buscador</title>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

<script>
jQuery(document).ready(function($) {
	$("#search_form").submit(function(e) {
		e.prevenDefault();
	});

	$("#search_form").keyup(function(event) {
		var envio = $("#search").val();
		$('#resultados').html('asd');
		$.ajax({
			url: 'resultado.php',
			type: 'POST',
			data: ('search='+envio),
			success: function(resp){
				if (resp!=""){
					$('#resultados').html(resp);
				}
			}
		})	
		
	});

    $(".add").click(function(a) {
    a.prevenDefault();
 	var id=$(this).attr('data-id');
 	alert (id);


  });


});
	

</script>
   
  </head>

  <body>
 

<form action="" method="POST" name="search_form" id="search_form">
		Ingrese el Codigo : <input type="text" name="search" id="search">



</form>

<div id="resultados"></div>




<?php


if (isset($_SESSION['carrote'])) {
	echo "Existe una sesion definida";
	print_r ($_SESSION['carrote']);
}else{

	echo "No existe sesion definida aun";
}




?>


  </body>
</html>

y su hoja de busquedas

Código PHP:

  
<?php 

require_once('Connections/necro.php');

 
$search = "";

 
if (isset($_POST['search'])) {

    $search = $_POST['search'];

 
mysql_select_db($database_necro, $necro);

$query_consulta_destacados4 = "SELECT * FROM tbl_producto WHERE tbl_producto.table_pro = ".$search." ";

$consulta_destacados4 = mysql_query($query_consulta_destacados4, $necro) or die(mysql_error());

$row_consulta_destacados4 = mysql_fetch_assoc($consulta_destacados4);

 
 $all_consulta_producto = mysql_query($query_consulta_destacados4);

 $totalRows_consulta_producto = mysql_num_rows($all_consulta_producto);

 
 
 
if($totalRows_consulta_producto == 0){

 
    echo "No hay resultado para mostrar";

        }else {

 
            

    echo $row_consulta_destacados4['nom_pro']; 

    echo " <a class='add' data-id="; 

    echo $row_consulta_destacados4['id_pro'];

    echo "   href='#'>Agregar Producto</a>" ;

}

 
}

    

 
 
 
 
 
?>

El tema que cuando me muestra el producto, al querer pinchar el enlace que la consulta me entrega no me funciona la funcion "add", pero si en un nuevo html pongo esto

Código HTML:

<div id="resultados">Emblema Cross Bone <a class="add" data-id="7" href="#">Agregar Producto</a>
</div>

Si me funciona la funcion

Código HTML:

    $(".add").click(function(e) {
 	var id=$(this).attr('data-id');
 	alert (id);

Que podra ser ??

se agradece su ayuda !

Alexis88 · #2 (**permalink**) 12/09/2016, 23:35

No funciona porque el elemento es añadido dinámicamente y, por lo tanto, el código JavaScript no lo reconoce puesto que cargó antes que este.

Lo que debes hacer es delegar el evento al elemento de id "resultados" y afectar a los elementos que este contenga cuya clase sea igual a "add".

Código Javascript:

Ver original$("#resultados").on("click", ".add", function(){
    //Aquí debes colocar las instrucciones
});

KalSmith · #3 (**permalink**) 13/09/2016, 07:24

Cita:

Iniciado por Alexis88

No funciona porque el elemento es añadido dinámicamente y, por lo tanto, el código JavaScript no lo reconoce puesto que cargó antes que este.

Lo que debes hacer es delegar el evento al elemento de id "resultados" y afectar a los elementos que este contenga cuya clase sea igual a "add".

Código Javascript:

Ver original$("#resultados").on("click", ".add", function(){
    //Aquí debes colocar las instrucciones
});

Muchas gracias, me resulto de inmediato

Gracias !