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

我认为你以错误的方式看待它。您可以保留共享点击处理程序，但找出哪个div是父项，并在后续选择器中使用其ID，而不是为每个div设置单独的单击处理程序。

$('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;
});

Answer 2

您的代码应该可以为每个范围添加点击甚至处理程序。

$('span.label-info').click(function() {
    $(this).attr('id'); //<--$(this) is a handle to the clicked span
    $(this).parent().attr('id'); //<-- $(this).parent() references the parent div
});

值得一提，请考虑将.click()更改为.on('click')。

另外 - 如果你想在span动态添加到div之后没有重新绑定就绑定一次，你可以像这样绑定它：

$('div').on('click', 'span.label-info').click(function() {  
   /* <-- do stuff with $(this) or $(this).parent() here --> */
});

Answer 3

http://jsfiddle.net/GZVdL/3/

您好。

在您的span单击事件中，您可以找到父div，然后获取其属性ID以查找它是哪个div。以下是代码

$(document).ready(function(){


$(".tag").click(function(){


    alert($(this).parent().attr("id"));
});

});

在`span`标签上捕获onClick事件

3 个答案: