在我的 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 标签?
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;
});
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 --> */
});
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"));
});
});