要素の子供のjQuery警告onclick？

Question

私は特定の要素にアラートを表示するには、このコードを使用しています：

$("#resultsBox").click(function (event) { 
    console.log('a'); 
    }); 

は、私はあなたが「#resultsBox」内側「李」要素をクリックした場合にのみ、アラートを表示したいです。

私はこのようにそれをやろうとしている

：

$("#resultsBox li").click(function (event) { 
    console.log('a'); 
    }); 

これは、要素の#resultsBox構造である：

<div id="resultsBox"> 
    <ul> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 

はどのようにこれを行うことができますか？質問の編集後

Answer 1

あなたは.click()と、イベントハンドラをバインドすると、それはその瞬間ではなく、後から動的に追加された要素にあなたのセレクタをマッチした任意の要素に適用されます。

：

あなたのdivが「resultsBox」と呼ばれて考えると、あなたが実際にあなたが委任されたイベントハンドラを使用する必要があり、その場合には、いくつかの他の操作の結果を、表示するために動的にに物事を追加していると仮定するのが妥当と思われます

$("#resultsBox").on("click", "li", function (event) { 
    console.log('a'); 
}); 

.on() methodのこの構文はハンドラを「#resultsBox」にバインドしますが、クリックが発生すると、jQueryは2番目のパラメータの「li」セレクタに一致する子要素にあるかどうかをチェックします。それ以外の場合は機能しません。

Answer 2

UPDATE：http://jsbin.com/ocejar/2/edit

しかし、いずれにせよ、上記のも、あなたの例を：

<div id="resultsBox"> 
    <ul id="myList"> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 


$("#myList > li").click(function (event) { 

     console.log('a'); 

     }); 

Demo

Answer 3

このような何かが

$("#resultsBox").find("li").click(function(){ 
    alert("You clicked on li " + $(this).text()); 
}); 

これは動作するはずですが動作するはずですを使用してはうまくいくはずです。 hereを参照してください。ただし、$("#resultsBox").find("li")を使用すると、パフォーマンス面ではlittle fasterになります。

Answer 4

$("#resultsBox").find('li').click(function (event) { 
    alert($(this).text()); 
    }); 

Answer 5

あなたのコードをあなたは動作する必要があります持っているように：http://jsfiddle.net/GxCCb/

その重要なコードが評価されるときににイベントハンドラをアタッチしようとしている要素が存在しなければならないことに注意すること。後で追加する場合は、on()（v1.7 +）またはdelegate()（< 1.7）を使用する必要があります。これは、イベントの委任に使用され、後で追加するとその要素を参照できるようになります。

（）上を使用：

：デリゲート（）を使用してhttp://jsfiddle.net/7Lz2Y/

：

$("#resultsBox").on('click', 'li', function (event) { 
    alert(this.innerHTML); 
    }); 

デモ

$("#resultsBox").delegate('li', 'click', function (event) { 
    alert(this.innerHTML); 
    }); 

デモ：http://jsfiddle.net/XwYs5/

しかし、存在する要素のためのイベントハンドラを取り付けるための他の方法がたくさんある前：

$("#resultsBox").find('li').click(function (event) { 
    alert(this.innerHTML); 
    }); 

デモ：http://jsfiddle.net/74Q7p/

$("#resultsBox ul > li").click(function (event) { 
    alert(this.innerHTML); 
    }); 

デモ：http://jsfiddle.net/a28U5/

Answer 6

これはうまくいくはず。

$("#resultsBox ul li").click(function (event) { 
    console.log('a'); 
}); 

Answer 7

これは、動的に追加された要素に対して機能します。