javascript - 将事件处理程序添加到孙子

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

尝试使用on()和> * > *。>指孩子。没有它，就意味着后代。然后第一个> *是孩子，第二个> *是孩子的孩子或“孙子”

$('#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

您还可以在此处使用事件委托。仅将单击处理程序分配给父元素，在处理程序中检查单击发生的元素，并采取相应措施。例如：

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