15

Si tengo por ejemplo varios <span> y le hago click a uno como puedo, con jquery saber en cual he hecho click? Siendo las ID de los elementos numerados automáticamente con item_<?php echo $i; ?> ?

Es decir, yo quiero que al hacer en el span con id=item_2 me haga por ejemplo un alert.() "has hecho click en item_2"

<div id="items_en_uso">
  <span style="background:#c9c9c9;padding:3px;" id="item_1">Hola</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_2">adios</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_3">buenas</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_4">malas</span><br><br>
</div>

EDITO:

Los spans son añadidos al hacer click en otro elemento con

$("#clikeable").click(function(){
   $("#items_en_uso").append("<span id='item"+count+"'>Hola</span>");
});

Si los spans están puestos a mano (no por jquery) si que funciona, pero si los añado con jquery al hacerles click, no me funciona... Como puedo arreglar esto?

2
  • Por qué una recompensa, teniendo una respuesta aceptada?
    – lois6b
    Commented el 23 ene. 2017 a las 9:50
  • 1
    La he aceptado después de poner la recompensa, no me deja darle la recompensa aún a @Muriano pero cuadno pueda se la daré, porque el ha respondido después de poner dicha recompensa.
    – Pavlo B.
    Commented el 23 ene. 2017 a las 10:26

5 respuestas 5

22
+100

el método .click de jQuery solo funciona con elementos que ya están en el DOM cuando el documento se carga. Para vincular eventos a elementos agregados al DOM de forma dinámica, usa el método .on sobre un elemento contenedor y filtra por el selector del elemento de interés.

$(document).ready(function(){
  $('body').on('click', '#items_en_uso span', function(){
    alert($(this).attr('id'))
  })
})
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<div id="items_en_uso">
  <span style="background:#c9c9c9;padding:3px;" id="item_1">Hola</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_2">adios</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_3">buenas</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_4">malas</span><br><br>
<span style="background:#c9c9c9;padding:3px;" id="item_5">SPAN DENTRO DEL DIV, SI ME HACES CLICK MOSTRARÉ UN ALERT CON MI ID</span><br><br>
</div>

<span style="background:#c9c9c9;padding:3px;" id="item_4">SPAN POR FUERA DEL DIV, SI ME HACES CLICK NO VOY HA HACER NADA</span><br><br>

Edición: Tal como comentan, el código se puede mejorar más.

$(document).ready(function(){
      $('body #items_en_uso').on('click', 'span', function(){
        alert($(this).attr('id'))
      })
    })

De esta manera, optimizas la parte en la que jQuery filtra el elemento objeto del evento.

4
  • 4
    +1 por usar delegated events ya que reducen la sobrecarga de la página al enlazar un event handler sólo a un elemento, en éste caso body. Sin embargo me parece más correcto enlazarlo de la siguiente forma: $('body #items_en_uso').on('click', 'span', function() ya que así el evento sólo tiene que hacer el bubble up a un elemento del span al #items_en_uso en lugar de tener que escalar hasta el elemento body en el DOM Commented el 23 ene. 2017 a las 9:56
  • Tienes toda la razón @david_rprada, ya he actualizado la respuesta acorde a ello.
    – Muriano
    Commented el 23 ene. 2017 a las 10:50
  • 1
    En la edición, puedes quitar body en el selector y seguiría funcionado igual
    – Marcos
    Commented el 23 ene. 2017 a las 15:12
  • Muy buena respuesta, gracias por la información. Commented el 2 oct. 2020 a las 14:08
9

Con este códdigo puedes realizar lo que deseas, simplemente está a la escucha de todos los elementos de tipo span dentro de tu div con id "items_en_uso" en tu código (previniendo hacer click en otros elementos de tipo span que estén por fuera) y devuelve el valor del atributo id mediante el objeto $(this)

$(document).ready(function(){
  $('#items_en_uso span').click(function(){
    alert($(this).attr('id'))
  })
})
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<div id="items_en_uso">
  <span style="background:#c9c9c9;padding:3px;" id="item_1">Hola</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_2">adios</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_3">buenas</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_4">malas</span><br><br>
<span style="background:#c9c9c9;padding:3px;" id="item_5">SPAN DENTRO DEL DIV, SI ME HACES CLICK MOSTRARÉ UN ALERT CON MI ID</span><br><br>
</div>

<span style="background:#c9c9c9;padding:3px;" id="item_4">SPAN POR FUERA DEL DIV, SI ME HACES CLICK NO VOY HA HACER NADA</span><br><br>

5
  • Se puede hacer eso mismo pero solo para los elementos que están dentro del div id="items_en_uso"?
    – Pavlo B.
    Commented el 20 ene. 2017 a las 16:46
  • Bueno, como está mi respuesta funciona para hacer click en todos los span que estén dentro <div id="items_en_uso"></div> ¿te refieres a poder hacer click en cualquier elemento dentro de dicho div?
    – Jorius
    Commented el 20 ene. 2017 a las 16:50
  • Es decir, si hay spans que están fuera de ese div no se vean afectados por esta función. Tan solo que sean "clickeables" los que están dentro de dicho div.
    – Pavlo B.
    Commented el 20 ene. 2017 a las 16:52
  • Revisa bien mi respuesta, es lo que buscas, puse un span por fuera y al darle click no hace nada, solo se ven afectados los que están DENTRO del div
    – Jorius
    Commented el 20 ene. 2017 a las 16:54
  • @PavloB. - Con el selector * puedes seleccionar cualquier elemento dentro del '#items_en_uso -> $('#items_en_uso *').on('click', function() { alert($(this).prop('id')); }); Commented el 20 ene. 2017 a las 16:54
3

Puedes realizarlo tomando como referencia los elementos que empiezan por ese id en concreto (los que empiezan por item_) con el selector ^= y después hacer referencia al elemento que has pulsado con la palabra reservada this.

De esta manera, una vez hayas detectado el elemento que ha sido pulsado y que tiene un id que empieza por item_, podrás obtener su atributo con la función attr('id') del mismo.

$("span[id^=item_]").click(function() {
  console.log("Has pulsado el elemento: " + $(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items_en_uso">
  <span style="background:#c9c9c9;padding:3px;" id="item_1">Hola</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_2">adios</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_3">buenas</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_4">malas</span><br><br>
</div>

2

Yo hago lo siguiente para detectar a que elemento de una lista se hace click, espero te pueda servir.

$(document).ready(function(){
  $("#ListPage").click(function (e) {
        var id = e.target.id;
        alert(id); // Mostrar ID solo para verificar que sea correcto
    });
});
1

Podrias usar un selector para todos los elementos de tipo span

En ese caso tendrias que reemplazar el span por el tipo de elemento que quieres acceder

$(document).ready(function(){

  $("span").click(function(){
    console.log(this.attr('id'));
  });

});
<div id="items_en_uso">
  <span style="background:#c9c9c9;padding:3px;" id="item_1">Hola</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_2">adios</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_3">buenas</span><br><br>
  <span style="background:#c9c9c9;padding:3px;" id="item_4">malas</span><br><br>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.