テーブルセル内のdivがクリックされたときを検出するにはどうすればよいですか？

Question

私はテーブルセル内にdivを持っています。私がdivの表のセルをクリックすると、clickイベントはトリガされません。その表のセルがdivの上にあるようですか？私はz-indexを無駄に調整しようとしました。

例行：

<tr ><td><div class="test" style='width:64px; height:22px; margin:0 auto; z-index:1000'></div></td></tr> 

例のjQuery：

$('.test').click(function(){ 
     console.log($(this), 'this'); 
    }); 

更新：ドキュメントがロードされた後、私の表の行にdivが動的に追加されるとjQueryコードが.readyでありますおそらくそれは私のコードの一部ですか？

Answer 1

あなたの質問への鍵は、あなたの最近のコメントである：

私のテーブルの行のdiv要素は、文書がロードされた後に動的に追加し、jqueryのコードは、おそらく私のコードの.ready一部であるとされますなぜですか？

あなたが要素の上に直接ハンドラをフックし、あなたのコードを実行すると、それはすでに存在セレクタに一致する要素のclickイベントのみをフックします。後で追加する要素は連結されません。

後で追加される要素をコードで処理する場合は、イベント委任を使用します。 onの委任フォーム（後で1.7以上を使用している場合）にjQueryはdelegate機能または経由して、これをサポートしています。doはあなたのケースでは、あなたが使用する可能性があります（一部のコンテナにclickイベントをフックでどんなものを

// Using `delegate`: 
$("selector_for_some_container").delegate(".test", "click", function() { 
    console.log($(this), 'this'); 
}); 

// Using `on` (v1.7 or later, note that the arguments are in a different order): 
$("selector_for_some_container").on("click", ".test", function() { 
    console.log($(this), 'this'); 
}); 

テーブル）をクリックし、クリックがそのコンテナに到達すると、jQueryは、与えられたセレクタに一致する要素を通過したかどうかを確認します。もしそうなら、jQueryは要素自体をクリックしたようにイベントを起動します。ここで

は（live copy | live source）の例です：

HTML：

<p>The "static" div below exists before we hook up our 
event handlers; the "dynamic" one is adding after. 
Click each of them to see which handlers fire.</p> 
<table id="theTable"> 
    <tbody> 
    <tr><td><div class='test' style='width:64px; height:22px; margin:0 auto; z-index:1000'>static</div></td></tr> 
    <tr><td id="target"></td></tr> 
    </tbody> 
</table> 

はJavaScript：

jQuery(function($) { 

    // Note that the div doesn't exist yet, so this won't 
    // hook it up 
    $(".test").click(function() { 
    display("Direct click handled on " + 
      this.innerHTML 
      ); 
    }); 

    // This form uses event delegation. Note that the div 
    // still doesn't exist. 
    $("#theTable").delegate(".test", "click", function() { 
    display("Delegated click handled on " + 
      this.innerHTML 
      ); 
    }); 

    // Add the div 
    $("#target").html(
    "<div class='test' style='width:64px; height:22px; margin:0 auto; z-index:1000'>dynamic</div>" 
); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

代わりに、もちろん、あなたは常に要素にイベントをフックすることができますあなたがそれを追加しているとき。しかし、コンテナから要素を追加したり減算したりする場合、イベント委譲はです。通常は、（必ずしもそうではありません）のイベントを処理する方法です。