Detectar en que elemento html se ha hecho click con jQuery

publicado por: Anonymous

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?

solución

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.

_x000D_

_x000D_

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

_x000D_

<script_x000D_
  src="https://code.jquery.com/jquery-3.1.1.min.js"_x000D_
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="_x000D_
  crossorigin="anonymous"></script>_x000D_
<div id="items_en_uso">_x000D_
  <span style="background:#c9c9c9;padding:3px;" id="item_1">Hola</span><br><br>_x000D_
  <span style="background:#c9c9c9;padding:3px;" id="item_2">adios</span><br><br>_x000D_
  <span style="background:#c9c9c9;padding:3px;" id="item_3">buenas</span><br><br>_x000D_
  <span style="background:#c9c9c9;padding:3px;" id="item_4">malas</span><br><br>_x000D_
<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>_x000D_
</div>_x000D_
_x000D_
<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>

_x000D_

_x000D_

_x000D_

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *