Asociar evento click en Javascript a varios elementos[Resuelta]

Respuestas:

•  

    2  

   

   

  Ernesto Peimbert Karma: 5335

   
  Fecha: 30-11-2015 12:43:01 Ya checaste que no sea problema de caché?
  Me ha pasado lo mismo en algunas ocasiones y al deshabilitar la caché todo funciona   Votos: 2 - Link respuesta
   
•  

    3  

   

   

  Juan Quinto Karma: 2761

   
  Fecha: 30-11-2015 13:00:22 recuerda que jquery es un lenguaje de script , eso quiere decir que cuando tu cargas se ejecuta en base a ese id , pero cuando cargas despues de haberse ya creado el dom el jquery ya no tiene manipulacion hacia los elementos creados
  
  es por eso que salio el evento live , $(document).on()
  
  lo que puedes hacer es lo siguiente reemplaza por esta linea
  
  
  si usas el jquery jQuery 1.3+ puedes usar el live
  
  

  
      $(document).ready(function(){
        $("#aceptar_amigo").live("click",function(evento){
              evento.preventDefault();
              var formulario = $(this).attr('href');
              $.ajax({
                  url: formulario,
                  type: "GET",
                  dataType: 'json',
                  success:function(respuesta){
                      if(respuesta.codigoRespuesta == 1){
                          $("#aceptar_amigo").html(respuesta.mensaje).fadeIn(1000);
                          alert("Fue agregado correctamente");
                          $("#friends_boton_perfil").html(respuesta.numero);
                          $('#result_pagina_perfil').fadeOut(1000);
                          $('#result_pagina_perfil').load('../../includes/friends.php?id_muro='+respuesta.usuario);
                          $('#result_pagina_perfil').fadeIn(1000);
                      }else if(respuesta.codigoRespuesta == 2){
                          $("#aceptar_amigo").html(respuesta.mensaje).fadeIn(1000);
                      }else if(respuesta.codigoRespuesta == 3){
                          alert(respuesta.mensaje);
                      }else{
                          $("#aceptar_amigo").html(respuesta.mensaje).fadeIn(1000);
                      }
                  },error:function(respuesta){
                      alert("error");
                  }
              });    
          });
    });   
  

  
  
  
  
  si usas // jQuery 1.7+ usas el $(document).on()
  
  adjunto codigo
  
  

  
      $(function(){
          $(document).on("click","#aceptar_amigo",function(evento){
              evento.preventDefault();
              var formulario = $(this).attr('href');
              $.ajax({
                  url: formulario,
                  type: "GET",
                  dataType: 'json',
                  success:function(respuesta){
                      if(respuesta.codigoRespuesta == 1){
                          $("#aceptar_amigo").html(respuesta.mensaje).fadeIn(1000);
                          alert("Fue agregado correctamente");
                          $("#friends_boton_perfil").html(respuesta.numero);
                          $('#result_pagina_perfil').fadeOut(1000);
                          $('#result_pagina_perfil').load('../../includes/friends.php?id_muro='+respuesta.usuario);
                          $('#result_pagina_perfil').fadeIn(1000);
                      }else if(respuesta.codigoRespuesta == 2){
                          $("#aceptar_amigo").html(respuesta.mensaje).fadeIn(1000);
                      }else if(respuesta.codigoRespuesta == 3){
                          alert(respuesta.mensaje);
                      }else{
                          $("#aceptar_amigo").html(respuesta.mensaje).fadeIn(1000);
                      }
                  },error:function(respuesta){
                      alert("error");
                  }
              });    
          });
    });  
  

  
  
  
  te recomiendo que uses la ultima version de jquery para que uses el $(document).on ya que el live ya es absoleto
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
  
  saludos   Votos: 3 - Link respuesta
   
•  

    2  

   

   

  Juan Quinto Karma: 2761

   
  Fecha: 30-11-2015 13:01:30 dejo el enlace para que leas
  
  http://api.jquery.com/live/
  
  saludos   Votos: 2 - Link respuesta
   
•  

    2  

   

   

  Ernesto Peimbert Karma: 5335

   
  Fecha: 30-11-2015 14:02:37 Juan, estuve leyendo tu respuesta y me suena raro.
  Los eventos click y on('click'), son lo mismo.
  Respecto a live, como bien indica Juan, ya se encuentra obsoleto, no es recomendable usarlo.
  Lo que suena aquí es que si ElCapa8 está creando objetos al vuelo entonces tiene que hacer delegación de eventos.   Votos: 2 - Link respuesta
   
•  

    3  

   

   

  Ernesto Peimbert Karma: 5335

   
  Fecha: 30-11-2015 14:06:08 ElCapa8, respecto a los eventos delegados lee lo que dice la documentación de on
  Trae una sección dedicada al tema y lo explica muy claramente   Votos: 3 - Link respuesta
   
•  

    4  

   

   

  Juan Quinto Karma: 2761

   
  Fecha: 30-11-2015 14:27:44 Hola ernesto no son lo mismo si tu despues de generar tu pagina , cargas dinamicamente un nuevo elemento y quieres controlar su evento click
  
  usando esto
  
  

  $("a").click(function(){
  });
  

  
  
  no funcionara , recuedda que jquery tiene manipulacion de los elementos cuando se genera el dom en pocas palabras todo los elemento que existe en ese momento , pero su tu añades un nuevo elemento despues que se genero el dom ya no podras tener manipulacion sobre ella
  
  es por ello que en la ueva version de jquery salio el on que significa q tendras manipulacion de todo los elementos creado al inicia el dom como tambien los elementos creados despues del dom
  
  es por ello que se hace referencia al document expongo codigo
  
  
  
  

  
  $(document).on("a",'click',function(){
  });
  
  

  
  
  saludos   Votos: 4 - Link respuesta
   
•  

    3  

   

   

  Ernesto Peimbert Karma: 5335

   
  Fecha: 30-11-2015 17:54:53 Pues sí, tienes razón Juan.
  A quien quiera hacer la prueba:
  
  Click:
  

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $('p.uno').click(function(e){
          alert('hola mundo');
      });
      $("p#add").click(function(){
          $('body').append('<p class="uno">Nuevo</p>');
      });
  });
  </script>
  </head>
  <body>
  
  <p class='uno'>If you click on me, I will disappear.</p>
  <p id='add'>Click me too!</p>
  
  </body>
  </html>
  

  
  
  On:
  

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $(document).on('click', 'p.uno', function(e){
          alert('hola mundo');
      });
      $("p#add").click(function(){
          $('body').append('<p class="uno">Nuevo</p>');
      });
  });
  </script>
  </head>
  <body>
  
  <p class='uno'>If you click on me, I will disappear.</p>
  <p id='add'>Click me too!</p>
  
  </body>
  </html>
  

    Votos: 3 - Link respuesta
   
•  

    2  

   

   

  Juan Quinto Karma: 2761

   
  Fecha: 30-11-2015 18:46:54 Hola ernesto , que bueno que hayas comprobado sobre el click y el on , saludos   Votos: 2 - Link respuesta
   
•  

    3  

   

   

  Qué Código Karma: 2708

   
  Fecha: 30-11-2015 19:41:19 Gran aporte Ernesto y gracias Juan doy por solucionada la pregunta.   Votos: 3 - Link respuesta
   
•  

    1  

   

   

  Andrés Fulloni Karma: 6

   
  Fecha: 09-10-2016 11:45:37 Buenas, googleando este problema llegue hasta aquí, me solucionó la parte del click en los otros elementos, pero sigo teniendo un problema. En mi jsp yo tengo esto
  

  <%for(DtTema tema: temas){%>
  <form id="favs">
            <div class="form-group">
                <input id="tema" type="hidden" name="tema" value="%=java.net.URLEncoder.encode(tema.getNombre())%>">
           </div>
           <div class="form-group">
                <input type="hidden" name="album" value="%=java.net.URLEncoder.encode(album.getNombre())%>">
           </div>
           <div class="form-group">
                 <input type="hidden" name="artista" value="%=java.net.URLEncoder.encode(album.getNickArtista())%>">
            </div>
            <div class="form-group">
            <button type="submit" id="agregar" style="background-color: #262626;border: none;width: 17px; height: 17px"><span id="estrella" class="glyphicon glyphicon-star" aria-hidden="true" style="color: #999999"></span></button>
              </div>
   </form>
  <%}%>

  
  O sea que para cada tema yo tengo un form donde tengo los parametros del mismo (nombre, album al que pertenece y artista), que son informacion que tengo en la jsp. Lo que quiero es que al presionar el boton me agregue a favoritos la cancion. El codigo que estoy usando actualmente es este:
  

  $(function(){
           $(document).on("click","#agregar",function(evento){
                  evento.preventDefault();
  
                 var datosFav=$("#favs").serialize();
                      $.ajax({
                          type: "GET",
                          url: "addFav",
                          data: datosFav
                          });
                  });
  }); 

  
  Pero al momento de hacer click, me agrega solo el primer tema. Que podria estar haciendo mal? pense que capaz al formulario tambien tendria que hacerle algo del estilo on(). Gracias   Votos: 1 - Link respuesta
   
•  

    1  

   

   

  Qué Código Karma: 2708

   
  Fecha: 09-10-2016 14:21:47 Hola amigo,
  Primero que todo bienvenido.
  Bueno según entiendo el problema que tienes es que no te agrega al que diste click, si no el primero de la lista que te muestra.
  Si es así, lo que debes hacer es asociar el .on() al formulario.
  

  $(function(){
      $(document).on("submit","#favs",function(evento){
          evento.preventDefault();
          var datosFav=$(this).serialize();
          $.ajax({
              type: "GET",
              url: "addFav",
              data: datosFav
          });
      });
  });
  

  
  En el evento .on() en vez de poner "click", pones el evento "submit".
  Y para hacer el serialize() lo haces con this para que te reconozca el formulario el cual se ha mandado.
  
  PD: para hacer esto creo que tocaria cambiar el button por un input[type=submit]
  
  Saludos.
  Equipo QueCódigo.   Votos: 1 - Link respuesta