jQuery 有条件地删除触发器

Question

我想知道 Javascript 或 jQuery 是否有办法删除事件侦听器。假设我想做一个我只想触发一次的函数，例如假设我想要一个按钮来显示文档上的一些隐藏元素，我会做这个函数（假设隐藏元素有一个hidden隐藏它们的类）：

jQuery('#toggler').click(function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
});

够简单吧？现在，我的实际问题来了，我不希望 jquery 每次单击按钮时都一遍又一遍地运行该函数，因为元素已经显示出来了，所以有没有一种干净的方法可以做它 ？因此，在此示例中，在多次单击切换器后，我只想获得一条控制台消息。

我可以使用jQuery(this).unbind('click')，但这会导致删除所有触发器，而我只想删除当前触发器。

当我遇到这种情况时，我通常会这样解决它（这丑并且实际上并没有阻止代码执行，而只是处理代码的结果) :

var toggler_clicked = false;
jQuery('#toggler').click(function() {
    if(toggler_clicked) return;

    toggler_clicked = true;
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
});

另外我不想使用jQuery的one，因为我需要有条件地删除触发器时也会遇到同样的问题，所以如果你能帮忙请给我一个动态的答案。

提前致谢！

Answer 1

你必须这样命名你的函数：

var myFunction = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
};

这样绑定

jQuery('#toggler').click(myFunction);

然后你可以解绑它：

jQuery('#toggler').off('click',myFunction);

不解除其他监听器的绑定

Answer 2

你可以试试这个：

var myFunc = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery(this).unbind('click', myFunc);
};
jQuery('#toggler').click(myFunc);

这种调用 unbind 的方式是只删除 myFunc 处理程序的侦听器，而不是所有连接到单击切换器的事件。

Answer 3

我会使用.on() 及其相反的.off() 方法来附加/分离事件处理程序。这是自 1.7 以来的推荐方式，而不是自 jQuery 3.0 起已弃用的 .bind() 和 .unbind() 版本。

$("#toggler").on("click", function(event) {
  console.log('Hidden elements are now shown');
  $('.hidden').removeClass('hidden');
  // if (/* Add your condition here */) {
    $(this).off(event);
  // }
});

$("#toggler").on("click", function(event) {
  console.log('Hidden elements are now shown');
  $('.hidden').removeClass('hidden');
  // if (/* Add your condition here */) {
    $(this).off(event);
  // }
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggler">Toggle</button>
<div class="hidden">
HIDDEN
</div>

Answer 4

试试这个

var myFunction = function() {
        console.log('Hidden elements are now shown');
        jQuery('.hidden').removeClass('hidden');
    };

像这样添加事件监听器：

 jQuery('#toggler').addEventListener("click", myFunction);

然后像这样删除它：

jQuery('#toggler').removeEventListener("click", myFunction);

所以所有这些都可以解决问题：

var myFunction = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery('#toggler').removeEventListener("click", myFunction);
};

jQuery('#toggler').addEventListener("click", myFunction);

more about the HTML DOM removeEventListener() Method

Answer 5

Jquery unbind 函数有两个参数 eventType 和 handler

您可以像这样将事件监听器放入单独的函数中：

var clickEventHandler = function(){
  //your logic goes here
}

添加监听器作为参考后：

jQuery('#toggler').click(clickEventHandler);

然后，稍后，您可以随时随地解除绑定该特定处理程序：

jQuery('#toggler').unbind('click', clickEventHandler);

Answer 6

我过去所做的是使用 css 类切换单击行为，例如，我曾经在父级上设置一个单击侦听器并将 jquery 现在默认情况下正在执行的所有子级委托给所有子级。无论如何，基于 css 类，它将触发 ex 事件。

$('.some-parent-element').on(
   'click', 
    'the-behavior-css-class', 
    function() { // do stuff here.... }
)

现在，如果您想删除此行为，您只需切换元素的类，它就可以完成这项工作。例如

$('.some-parent-element').on(
       'click', 
        'hide-me-on-click-or-whatever', 
        function() { 
            $(this).toggleClass('hide-me-on-click-or-whatever')
            // perform the action  
        }
    )

Answer 7

你可以检查元素是否隐藏了类