HTML Detectar en que elemento se ха hecho щелчок подставляет jQuery

Танго СИ por ejemplo различный <span> щелчок y le hago uno Комо puedo, подставьте саблю jQuery en cual он щелчок hecho? Довод "против" Siendo las ID de los elementos numerados automáticamente item_<?php echo $i; ?> ?

Es decir, эй довод "против" quiero que al hacer en el span id=item_2 я Хага por ejemplo ООН alert.() "имеет щелчок hecho 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:

Лос сын промежутков añadidos al hacer нажимает довод "против" en otro elemento

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

СИ Лос промежутки están puestos mano (никакой por jQuery) si que funciona, pero СИ Лос añado подставляют jQuery al hacerles щелчок, нет меня funciona... Комо puedo arreglar esto?

13
задан 24.01.2017, 07:46
0 ответов

метод .click jQuery только функционирует с элементами, которые уже находятся в DOM, когда документ загружается. Чтобы связывать события с элементами, добавленными к DOM динамической формы, использует метод .on на элементе контейнер и просачивается по селектору элемента интереса.

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

Редактирование: Как они комментируют, код может быть улучшенным больше.

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

Таким образом, ты оптимизируешь часть, в которой jQuery он выдает элемент объект события.

20
ответ дан 03.12.2019, 17:36
  • 1
    +1 из-за того, что использует delegated events , так как они уменьшают перегрузку pá gina, соединив event handler só это в элемент, в é ste я женю body. Однако он мне кажется má s правильный соединять это следующей формы: $('body #items_en_uso').on('click', 'span', function(), так как así событие só должен делать это bubble up в элемент span #items_en_uso вместо того, чтобы быть должным взбираться до элемента body в DOM –  23.01.2017, 11:56
  • 2
    У тебя есть вся razó n @david_rprada, уже я обновил ответ согласно этому. –  23.01.2017, 12:50
  • 3
    В edició n, ты можешь снимать body в селекторе и seguirí в функционировавший равный –  23.01.2017, 17:12

С этим códdigo ты можешь реализовывать то, что ты желаешь, просто будь в слушание всех элементов типа span внутри тебя div с id "items_en_uso" в твоем коде (предотвращая кликать в других элементах типа span, что были снаружи), и возврати стоимость признака пойдите посредством объекта $(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>
8
ответ дан 03.12.2019, 17:36
  • 1
    Себе может делать это само но одинокое для элементов, что está n внутри div id="items_en_uso"? –  20.01.2017, 18:46
  • 2
    Ну, как está мой ответ функционирует, чтобы кликать во всех span, что esté n внутри <div id="items_en_uso"></div> ¿ ты имеешь в виду мочь кликать в любом элементе внутри выражения div? –  20.01.2017, 18:50
  • 3
    А именно, если есть spans, что está n вне этого div не оказывайтесь затронутыми этой funció n. Только, что были " clickeables" которые está n внутри выражения div. –  20.01.2017, 18:52
  • 4
    Проверь хорошо мой ответ, вот то, что ты ищешь, я поместил span снаружи и дав ему click, он ничего не делает, только оказываются поврежденными те, которые está n ВНУТРИ div –  20.01.2017, 18:54
  • 5
    @PavloB. - С селектором * ты можешь выбирать любой элемент внутри '#items_en_uso-> $('#items_en_uso *').on('click', function() { alert($(this).prop('id')); }); –  20.01.2017, 18:54

Ты можешь реализовывать это приводя в пример элементы, которые начинают с этого, пойдите в частности (те, которые начинаются из-за item_) с селектором ^= и после ссылаться на элемент, который ты нажал с размещенным словом this.

Таким образом, однажды ты обнаружил элемент, который был нажат и у которого есть один, пойдите, что он начинается из-за item_, ты сможешь получать Ваш признак с функцией attr('id') того же самого.

$("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>
3
ответ дан 03.12.2019, 17:36

Ты мог бы использовать селектор для всех элементов типа span

В этом случае ты был бы должен заменять span типом элемента, что ты хочешь согласиться

$(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>
1
ответ дан 03.12.2019, 17:36