javascript - 附加到子项时删除 onclick

Question

我有以下代码:

layoutOverlaysBldg = $("#layout-overlays-bldg")
layoutOverlaysBldg.on("click", "div", function(event) {
  var floor;
  console.log("floornum: " + this.dataset.floornum);
  floor = parseInt(this.dataset.floornum);
  ...
  $("#choose-floor").fadeOut();
  $("#choose-apt").fadeIn();
});

稍后 - 基于我从数据库中取回的数据 - 我想删除一些 .on("click", "div", ...) 中的一些div。我已经有了获得正确 div 的选择器，但我不知道如何删除点击事件。我在选择正确的 div 后尝试了 .off("click") 但它没有效果。

Answer 1

此问题是因为您使用的是委托(delegate)事件。您可以为所有子元素添加或删除事件，但不能为给定 div 选择器的单个子元素添加或删除事件。

考虑到这一点，完成所需操作的最简单方法是根据类添加事件，然后根据需要在子项上添加和删除该类。像这样:

layoutOverlaysBldg = $("#layout-overlays-bldg")
layoutOverlaysBldg.on("click", "div.clickable", function(event) {
    // your code...
});

然后您可以通过添加或删除 .clickable 类来启用/禁用子 div 上的事件。