How to detect when a div inside a table cell is clicked on?
<p>I have a div inside a table cell. When I click in the table cell on the div, the click event isn't trigged, it seems like that table cell is on top of the div? I have tried adjusting the z-index to no avail.</p>

<p>Example row:</p>

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

<p>Example jquery:</p>

<pre><code>$('.test').click(function(){
        console.log($(this), 'this');
    });
</code></pre>

<p><strong>Update</strong>: The div in my table row is added dynamically after the document is loaded and the jquery code is in the <code>.ready</code> part of my code perhaps that is why?</p>
