我有一些html代码,其层次结构为
<div id="a">
<span>
<span id="s1">...</span>
<span id="s2">...</span>
<span id="s3">...</span>
</span>
</div>
我想将事件处理程序附加到s1,s2,s3并假设我不知道id div.span。 我试过了
$('#a span span').click(function(){
alert('called');
});
但这不起作用。是否有其他选项可以访问元素的子元素。
答案 0 :(得分:4)
Try using on()
and > * > *
。 >
表示孩子。没有它,它将意味着后代。然后第一个> *
是孩子,第二个> *
是孩子的孩子或“大孩子”
$('#a > * > *').on('click', function() {
alert('called');
});
我删除了我的第一个答案(委托版on()
),因为我无法让它在jsFiddle上工作。我不确定为什么它不起作用。
答案 1 :(得分:2)
$('#a>span>span').click(function(){
alert('called');
});
它将调查#a和#a的所有直接孩子,它是在该范围内照顾直接孩子的跨度
<div id="a">
<span>
<span id="s1">hit</span>
<span id="s2">hit</span>
<span id="s3">hit</span>
</span>
<span>
<strong>
<span>Wont hit</span>
</strong>
</span>
</div>
使用该标记,文本命中的所有范围都会有一个点击事件。 jsfiddle测试:http://jsfiddle.net/voigtan/TeN2q/
答案 2 :(得分:1)
您也可以在此处使用event delegation。仅将单击处理程序分配给父元素,在处理程序内检查单击发生的元素,并相应地执行操作。例如:
$('#a').click(function(e){
e = e || event;
var src = e.target || e.srcElement;
if (/^s/i.test(src.id)){ /* actions */ }
return true;
});