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

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;
});