機能の子供たちe？

Question

<div id="home"> 
    <div id="second"></div> 
</div> 

#home { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

#second { 
    width: 20px; 
    height: 20px; 
    background-color: green; 
} 

$(window).click(function(e) { 
    if(e.target.id == 'home'){ 
     alert('This is div home!'); 
    } 

}); 

ここで緑のdivをクリックすると、これは機能しませんが、このdivはdivの赤です。 自動的にすべての子div idをホームに追加できますか？このdivに100人の子供がいる場合、100を追加する必要がありますか？

Answer 1

あなたがターゲット要素が#homeのdiv内にあるかどうかを確認したいと思う：

$(document).click(function(e) 
{ 
    if(e.target.id == 'home' || $(e.target).closest('#home').length) 
    { 
     alert('This is div home!'); 
    } 
}); 

ここでフィドルです：http://jsfiddle.net/6sY49/

Answer 2

e.targetは常に最も深くネストされた要素になります。

すべての祖先をテストする必要がある場合は、.parentNodeを使用して祖先をループします。

$(window).click(function(e) { 
    var el = e.target; 
    while(el.id !== 'home') { 
     el = el.parentNode; 
    } 

    if(el) { 
     alert('This is div home!'); 
    } 
}); 

---

しかし、あなたは文書全体のイベントの委任をやろうとしているように思えます。 jQueryのは、中に組み込まれて、この能力を持ってい

$(document).on('click','#home',function() { 
    alert('This is div home!'); 
}); 

それとも前に、jQueryの1.7：。

$(document).delegate('#home','click',function() { 
    alert('This is div home!'); 
}); 

Answer 3

おそらくあなただけの、これは&をbublingイベントを使用します

$('#home').click(function(e) { 
    alert('This is div home'); 
}); 

を使用したいと思いますはるかに効率的になる！