Detect which html element has been clicked with jQuery

Navigation
11

If I have for example several <span> and I click on one as I can, with jquery to know which one I clicked on? Are the IDs of the elements numbered automatically with item_<?php echo $i; ?> ?

That is to say, I want that when doing in the span with id=item_2 it makes me for example a alert.() "you have clicked on 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>

EDIT:

Spans are added by clicking on another item with 

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

If the spans are placed by hand (not by jquery) if that works, but if I add them with jquery when I click them, it does not work ... How can I fix this?

    
asked by Pavlo B. 20.01.2017 в 17:22
source

5 answers

17

jQuery's .click method only works with elements that are already in the DOM when the document loads. To link events to elements added to the DOM dynamically, use the .on method on a container element and filter by the selector of the element of interest. 

$(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>

Edition: As they say, the code can be improved more. 

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

In this way, you optimize the part in which jQuery filters the element that is the object of the event.

    
answered by 23.01.2017 / 10:04
source
7

With this code you can do what you want, just listen to all span elements within your div with id " items_in_user "in your code (preventing clicking on other span type elements that are on the outside) and returning the value of the id attribute using the $(this) object % 

$(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>
    
answered by 20.01.2017 в 17:31
3

You can do it taking as reference the elements that start with that id in particular (those that begin with item_ ) with the selector ^= and then refer to the element that you clicked with the reserved word this .

In this way, once you have detected the element that has been pressed and that has an id that starts with item_ , you can obtain its attribute with the function attr('id') of it. 

$("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>
    
answered by 20.01.2017 в 17:29
2

I do the following to detect which element of a list is clicked, I hope I can serve you. 

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

You could use a selector for all elements of type span

In that case you would have to replace the span with the type of item you want to access 

$(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>
    
answered by 20.01.2017 в 17:27
Boolean primitive values versus boolean object What is the difference between static and final?