Cómo detectar el evento click de un botón situado en un archivo, cargado con load en un div

Hola a todos, necesito detectar el evento click que genera un botón, el cual se encuentra en un fichero .html que cargo en un div a través del método load de jQuery. Lo he intentado y no encuentro solución.

Tengo un fichero llamado prueba1.html, en el que tengo un botón (Botón1) sobre el que al hacer clic me muestra un alert (me funciona sin problemas). Este mismo fichero tiene un div cuyo id es carrito. En ese div, cargo el contenido de un fichero .html llamado prueba2.html el cual contiene la siguiente línea de código:

Tengo un tercer fichero llamado codigo2.js el cual contiene el código jquery para gestionar los eventos y cuyo código es el siguiente:

//CODIGO JAVASCRIPT Y JQUERY
$(document).ready(inicio)
function inicio(){
    $('#carrito .pulsame').click(eventoBoton2); //Esta línea no me funciona, simplemente es una intentona a la desesperada.
    $(".boton1").click(eventoBoton1);
    $("#carrito").load("pru2.php");
}
 
function eventoBoton1(){
    var idProducto = $(this).val();
    alert("El código del producto es: "+idProducto);
}
 
function eventoBoton2(){
    alert("Hola soy el boton 2");
    //$("#carrito").load("php/poncarrito.php");
}

MI PREGUNTA ES:

¿Cómo detecto el evento click del botón2, el cual cargo en un div con el método .load() de jQuery?

GRACIAS DE ANTEMANO Y SALUDOS.

Respuestas

Amigo el problema es que estas asociando el evento al botón antes de que se genere el html dentro del div "carrito" entonces jQuery recorre el DOM en busca de un un elemento que aún no se ha generado, si quieres adicionar un evento a un elemento que se genera dinámicamente debes hacerlo una vez que te asegures de que ese elemento se ha cargado, prueba con el callback "complete" del evento load de jQuery que ejecuta una función al finalizar la carga de load, entonces ya estaría asociado al DOM el elemento del botón que quieres.

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

Ejemplo:

$("#carrito").load("prueba2.html", function() {
  $("#carrito .pulsame").click(function(){
       alert("It works.");
   });
});

Deja el comentario si funciona o no para buscar otra solución. Saludos.

@RoberRielo

9 septiembre 2016, 7:17

Hola @RoberRielo, muchas gracias por tu ayuda, funciona correctamente.

Saludos.

@jjulianalcolea

19 septiembre 2016, 23:43