jQuery的.off("click")事件无效。

Question

这个问题已经困扰我几个小时了，仍然不明白为什么它不起作用...当我使用 table.off("click"); 时，它可以工作，但也会取消绑定在第一个子元素上的点击事件，该元素没有id=multi...

var table = $("table#datatable")
var button = $(".generate")

function turnOffClick() {
  console.log("button clicked")
  var multiButton = $("label#multi")
  multiButton.off("click");
}

table.on("click", button, turnOffClick)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
<tr>
  <td>
    <label class="generate">Generate</label>&nbsp&nbsp
    <label class="generate multi">Generate Multi</label>
  </td>
</tr>
</table>

- NeedHelpBasicallyOnEverything

---

你正在对一个没有事件处理程序的元素调用 off() 函数...? - Rory McCrossan

我认为它具有点击事件处理程序，因为当我单击它时，它会在控制台上打印出添加到“table.on（“click”，button，turnOffClick）”中的类“.generate”的标签上的单词“button clicked”。 - NeedHelpBasicallyOnEverything

事件处理程序位于“table”元素上。如果您想禁用它，请使用“table.off('click', button, turnOffClick)” - Rory McCrossan

不，事件监听器位于其祖先元素之一（实际上是table#datatable）。这就是为什么当您单击它时会触发事件。但是，您没有显式地向label#multi element添加事件监听器。因此，您无法删除其中的一个。 - Guillaume Georges

可能不是解决方案，但您的标签具有class multi，而您的代码 - var multiButton = $（“label＃multi”） - 引用带有#符号的id。要引用类，您需要：var multiButton = $（“label.multi”）。 - James Douglas

Answer 1

如果您想在第一次点击后取消事件，可以使用jQuery的one()方法。

var table = $("table#datatable")

function turnOffClick() {
  console.log("button clicked");
}

table.on("click", ".generate:not(.multi)", turnOffClick);
table.one("click", "label.multi", turnOffClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
  <tr>
    <td>
      <label class="generate">Generate</label>&nbsp&nbsp
      <label class="generate multi">Generate Multi</label>
    </td>
  </tr>
</table>

- Zakaria Acharki

---

这是我第一次听说one()，很高兴你向我介绍它。我也可以在我的其他函数中使用它，因为它也更短。 - NeedHelpBasicallyOnEverything

很高兴能帮助你，兄弟。 - Zakaria Acharki

Answer 2

你正在从表中获取事件，但却从标签中移除了事件。

$( "table#datatable td label" ).bind( "click", function() {
  console.log( "Sample" );
  var multiButton = $("label#multi");
  console.log(multiButton);
  $( "label#multi").off( "click" );
});
});

- olgunyldz

---

bind？！！真的吗 - Zakaria Acharki

@ZakariaAcharki 你知道不使用bind()的原因吗？我只是好奇，因为它在v3中被弃用了。我个人使用on()，但那只是因为我更喜欢这个词:p - Reinstate Monica Cellio

它只是在v3中被弃用了，但已经被废弃了两年多 :D - Zakaria Acharki

@ZakariaAcharki 是的，在最新版本中。我很认真 - 除了“在最新版本中被弃用”以外，你有没有不使用bind的理由？ - Reinstate Monica Cellio

@ZakariaAcharki 我是在问一个真正的问题。如果你没有真正的答案，那就直说，不要表现得像个6岁孩子。 - Reinstate Monica Cellio

Answer 3

事件不在label#multi中，而是在table#datatable中。

尝试使用以下解决方案：

var table = $("#datatable td")
var button = $(".generate")

function turnOffClick() {
   console.log("button clicked")
   var multiButton = $(this)
   multiButton.off("click");
}

table.on("click", button, turnOffClick)

您可以在所有行中添加click事件，然后在单击的行中删除该事件的函数。

- Ruben Sala