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

用 jQuery 检测哪个 html 元素被点击

  • 772

例如，如果我有几个<span>并且我单击一个，我如何使用 jquery 知道我单击了哪个？作为元素的 ID 自动编号为item_<?php echo $i; ?>?

也就是说，我希望在span with id=item_2it的时候做我，比如一个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. 使用此代码，您可以做您想做的事，它只是在您的代码中侦听您​​的id为“ items_in_use ”的所有span元素（防止点击外部的其他span元素）并使用对象返回iddiv$(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_使用选择器引用以特定 id 开头的元素（以 开头的元素）^=然后使用保留字引用单击的元素来做到这一点this。

    这样，一旦你检测到了被点击的元素，并且id以 开头item_，你就可以通过它的function获取它的属性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类型的所有元素使用选择器

    在这种情况下，您必须将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