dqkx69935
2014-05-24 10:41
采纳率: 100%
浏览 2.5k

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

在我的 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 标签?

图片转代码服务由CSDN问答提供 功能建议

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

 &lt; div class =“bootstrap-tagsinput”id =“1”&gt; 
&lt; span class =“tag label label-info  “&gt;访问控制列表&lt; / span&gt;  
&lt; span class =“tag label label-info”&gt;网络防火墙&lt; / span&gt;  
&lt; / div&gt; 
 
 
&lt; div class =“bootstrap-tagsinput”id =“2”&gt; 
&lt; span class =“tag label label-info”&gt;访问控制列表&lt;  /跨度&GT;  
&lt; span class =“tag label label-info”&gt;网络防火墙&lt; / span&gt;  
&lt; / div&gt; 
   
 
 

我的当前脚本捕获所有span元素而不管div。

 <  code> $('span.label-info')。click(function(){
 
 var news = $('input [type = text] [id =“vuln&lt;?php echo $ model-&gt; v_id  ;?&gt;“]')。val()+','+ $(this).text(); 
 $('input [type = text] [id =”vuln&lt;?php echo $ model-&gt  ; v_id;?&gt;“]')。val(新闻); 
返回false; 
}); 
   
 
 

我怎样才能点击span 每个div内的元素分别?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • duanhao9176 2014-05-24 10:51
    已采纳

    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;
    });
    
    已采纳该答案
    打赏 评论
  • dth54864 2014-05-24 10:52

    Your code should work to add a click even handler to each span.

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

    It's worth mentioning, consider changing .click() to .on('click').

    Also - if you wanted to bind once without rebinding after spans were dynamically added to the div, you could bind it like this:

    $('div').on('click', 'span.label-info').click(function() {  
       /* <-- do stuff with $(this) or $(this).parent() here --> */
    });
    
    打赏 评论
  • dsg41888 2014-05-24 11:06

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

    Hi.

    in your span click event you can find parent div and then get its attribute id to find which div it is. Below is the code

    $(document).ready(function(){
    
    
    $(".tag").click(function(){
    
    
        alert($(this).parent().attr("id"));
    });
    
    }); 
    
    打赏 评论

相关推荐 更多相似问题