Question

我有一些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');
});

但这不起作用。是否有其他选项可以访问元素的子元素。

Answer 1

Try using on() and > * > *。 >表示孩子。没有它，它将意味着后代。然后第一个> *是孩子，第二个> *是孩子的孩子或“大孩子”

$('#a > * > *').on('click', function() {
    alert('called');
});

我删除了我的第一个答案（委托版on()），因为我无法让它在jsFiddle上工作。我不确定为什么它不起作用。

Answer 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/

Answer 3

您也可以在此处使用event delegation。仅将单击处理程序分配给父元素，在处理程序内检查单击发生的元素，并相应地执行操作。例如：

$('#a').click(function(e){
  e = e || event;
  var src = e.target || e.srcElement;
  if (/^s/i.test(src.id)){ /* actions */ }
  return true;
});

为大孩子添加事件处理程序

3 个答案: