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

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>

具有该标记的所有跨度与文本匹配都将具有click事件。 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;
});