Question

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.

Example row:

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

Example jquery:

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

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

Answer 1

The key to your question is in your recent comment:

The div in my table row is added dynamically after the document is loaded and the jquery code is in the .ready part of my code perhaps that is why?

When you run your code, which hooks up the handler directly on elements, it will hook the click event only on elements matching the selector that already exist. Elements you add later won’t be hooked up.

If you want your code to handle elements that are added later, you probably want to use event delegation. jQuery supports this via the delegate function or (if you’re using 1.7 or later) the delegating form of on:

// 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');
});

What those do is hook the click event on some container (in your case you might use the table), and when the click reaches that container, jQuery checks to see if it traveled through an element matching the selector you give. If so, jQuery fires the event as though you’d hooked click on the element itself.

Here’s an example (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);
  }
});

Alternately, of course, you can always hook up the event on the element when you’re adding it. But if you’re adding and subtracting elements from a container, event delegation is usually (not always) the way to handle events on them.