如何在`span`标签上捕获onClick事件？

Question

在我的 div 元素中有很多 span 标签，每个 div 都有个惟一的 id，我想在每个 div uniquley 中的 span 标签中添加一个 onclick 事件。该怎么做呢？

  <div class="bootstrap-tagsinput"id="1">
  <span class="tag label label-info">Access control lists</span> 
  <span class="tag label label-info">Network firewall</span> 
  </div>


  <div class="bootstrap-tagsinput"id="2">
  <span class="tag label label-info">Access control lists</span> 
  <span class="tag label label-info">Network firewall</span> 
  </div>

我当前的脚本捕获了所有的 span 标签，但和 div 无关。

      $('span.label-info').click(function() {

         var news=$('input[type=text][id="vuln<?php echo $model->v_id;?>"]').val()+','+$(this).text();
         $('input[type=text][id="vuln<?php echo $model->v_id;?>"]').val(news);
        return false;
});

如何在每个 div 中分别捕捉到 span 标签？

Answer 1

I think you're looking at it the wrong way. Instead of having a separate click handler for each div, you can keep the shared click handler, but find out which div is the parent, and use its ID in the subsequent selectors.

$('span.label-info').click(function() {

    // find the parent/ansector that is a div and has the class
    var divId = $(this).closest('div.bootstrap-tagsinput').prop('id');

    var news=$('input[type=text][id="vuln' + divId + '"]').val()+','+$(this).text();
    $('input[type=text][id="vuln' + divId + '"]').val(news);
    return false;
});