您可以针对标记为.on()和.off()的元素子部分吗?

Can you target a subsection of elements tagged with .on() with .off()?

本文关键字：元素 off 记为 on      更新时间：2023-09-26

遇到以下问题:

$(document).on("click", ".element", function () {do something}
<div class="element"></div>
<div class="element"></div>
<div class="element" attribute="different"></div> //do something different
<div class="element"></div>
$('.element[attribute="different"]').off();
$(document).on("click", ".element[attribute="different", 
  function () {do something unique}

在这个场景中，.off()不起作用。有什么方法可以达到我在这里想要做的吗?

{{注意}}

在这种情况下，我不能修改原始的。on事件。它内置于我们正在开发的系统中，用于处理特定事件。

http://jsfiddle.net/KMrVY/

一开始您可以在相关属性上使用on。有了这个，你就不需要使用off了。下面是一个JSFiddle，它精确地展示了如何使用这个东西。

$(document).on('click', '.element[attribute!="different"]', function() {});

这个答案让我们对正在发生的事情有了一些了解。以下是节选:

当使用.on()的动态形式时(其中您将选择器作为参数给.on())，您不能只删除部分项。这是因为根元素上只安装了一个事件处理程序而jQuery只能删除整个内容，或者根本不删除。所以,你不能只。off()一些动态项

他建议的方法是off整个事件(在您的情况下，在所有.element s上)，然后使用您需要的特定选择器重新创建它。我已经对JSFiddle进行了更新，以实际显示这一点(尽管获取所需的处理程序函数并不漂亮)。

如果您有对原始处理程序函数的引用，则会使操作简单得多。

如果您不能修改原始事件，那么应该可以在文档的某个中间点安装您自己的委托点击处理程序，并通过防止事件传播来过滤调用:

<div id="whatever">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element" attribute="different"></div>
  <div class="element"></div>
</div>
$(document).on("click", ".element", function () { alert("I 'm untouchable");});
$("#whatever").on("click", ".element", function (event) {
    if ($(this).is("[attribute='different']")) {
        // do something else
        alert("Stop right there!");
        // and stop event propagation
        event.stopPropagation();
    }
});

实际操作

您自己的标记可能没有div#whatever，但由于您可以自由地将处理程序附加到文档主体下方的任何地方，只要它是您所针对的元素的祖先，因此应该不缺乏替代方案。

如果我知道其中一个或多个是不同的，我想我会遍历它们的。

也许这对几个元素不是那么有效，但如果你有很多元素或不同的元素，它将允许你从.bind()/.on()中选择元素。

在这种情况下，它可能是多余的。

$('.element').each(function() {
    if ($(this).attr('attribute') === 'whatever') {
        $(this).on('click', function() {/*Do something here*/});
    } else {
        $(this).on('click', function() {/*Do something else for all the others*/});
    }
});
相关文章：