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事件仅挂钩到与已存在的选择器匹配的元素。您稍后添加的元素将不会被连接。

如果您希望代码处理稍后添加的元素，您可能希望使用事件委派。 jQuery通过delegate函数支持此功能，或者（如果您使用的是1.7或更高版本）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');
});

他们做的是将click事件挂钩到某个容器上（在您的情况下可能使用该表），当点击到达该容器时，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);
  }
});

或者，当然，您可以在添加元素时始终将事件挂钩。但是如果你在容器中添加和减去元素，事件委托通常（并不总是）处理它们上的事件的方式。

如何检测单击表格单元格中的div的时间？

1 个答案: