Home / Questions / 45142
Accepted
Pavlo B.
Asked: 2020-01-21 08:22:29 +0800 CST 2020-01-21 08:22:29 +0800 CST

Определить, какой элемент html был нажат с помощью jQuery

  • 772

Если у меня их, например, несколько, <span>и я нажимаю на один, как я могу с помощью jquery узнать, на какой из них я нажал? Будучи идентификаторами элементов, автоматически пронумерованных с помощью item_<?php echo $i; ?>?

То есть я хочу, чтобы при выполнении в пролете id=item_2это делало меня, например, alert.()"вы нажали на 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>

РЕДАКТИРОВАТЬ:

Пролеты добавляются при нажатии на другой элемент с помощью

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

Если промежутки установлены вручную (не с помощью jquery), это работает, но если я добавляю их с помощью jquery при нажатии на них, у меня это не работает... Как я могу это исправить?

jquery

5 Answers

  1. Best Answer

    Метод jQuery .click работает только с элементами, которые уже находятся в 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 фильтрует элемент объекта события.

    • 22

  2. С помощью этого кода вы можете делать то, что хотите, он просто прослушивает все элементы span внутри вашего кода divс идентификатором " items_in_use " в вашем коде (предотвращая нажатие на другие элементы span снаружи) и возвращает значение атрибута id , используя объект$(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>

    • 9

  3. Вы можете сделать это, ссылаясь на элементы, начинающиеся с этого конкретного идентификатора (начинающиеся с 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

  4. Я делаю следующее, чтобы определить, какой элемент списка нажат, надеюсь, это поможет вам.

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

  5. Вы можете использовать селектор для всех элементов типа 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