このコードを使用して、特定の要素にアラートを表示しています。
$("#resultsBox").click(function (event) {
console.log('a');
});
「#resultsBox」内の「li」要素をクリックしたときにのみアラートを表示したい。
私はこのようにしようとしています：
$("#resultsBox li").click(function (event) {
console.log('a');
});
これは、要素の#resultsBox構造です。
<div id="resultsBox">
<ul>
<li></li>
<li></li>
</ul>
</div>
これはどのように行うことができますか？
イベントハンドラーをバインドすると、後で動的に追加された要素ではなく、その時点.click()でセレクターに一致したすべての要素に適用されます。
あなたの div が "resultsBox" と呼ばれている場合、他の操作の結果を表示するために実際に動的に追加していると仮定するのが合理的です。その場合、委任されたイベント ハンドラーを使用する必要があります。
$("#resultsBox").on("click", "li", function (event) {
console.log('a');
});
.on()メソッドのこの構文はハンドラーを「#resultsBox」にバインドしますが、クリックが発生すると、jQuery はそれが 2 番目のパラメーターの「li」セレクターに一致する子要素上にあるかどうかをチェックします。 .
このようなものが動作するはずです
$("#resultsBox").find("li").click(function(){
alert("You clicked on li " + $(this).text());
});
これで動作するはずです: http://jsbin.com/ocejar/2/edit
とにかく、上記の使用例も$("#resultsBox li")問題なく動作するはずです。ここを参照してください。ただし、パフォーマンスの面で使用すると、もう少し速く$("#resultsBox").find("li")なるはずです。
あなたのコードは動作するはずです: http://jsfiddle.net/GxCCb/
イベント ハンドラーをアタッチしようとしている要素は、コードが評価されるときに存在する必要があることに注意することが重要です。後で追加する場合は、on()(v1.7+) またはdelegate()(< 1.7) を使用する必要があります。これはイベント委任に使用され、後で追加された場合に要素を参照できるようにします。
on() の使用:
$("#resultsBox").on('click', 'li', function (event) {
alert(this.innerHTML);
});
デモ: http://jsfiddle.net/7Lz2Y/
delegate()の使用:
$("#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);
});
これはうまくいくはずです。
$("#resultsBox ul li").click(function (event) {
console.log('a');
});
$("#resultsBox").click(function (event) {
if(event.target.tagName.toLowerCase() == "li"){
console.log('a');
}
});
これは、動的に追加された li 要素に対して機能します。
質問編集後の更新:
<div id="resultsBox">
<ul id="myList">
<li></li>
<li></li>
</ul>
</div>
$("#myList > li").click(function (event) {
console.log('a');
});
$("#resultsBox").find('li').click(function (event) {
alert($(this).text());
});