jQuery 有条件地删除触发器

Question

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

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 myFunc = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery(this).unbind('click', myFunc);
};
jQuery('#toggler').click(myFunc);

这种调用解除绑定的方式是只删除 myFunc 处理程序的侦听器，而不是所有与切换器上的点击相关的事件。

Answer 2

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

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

然后这样绑定

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

然后你可以解除绑定：

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

不解绑其他监听器

Answer 3

您可以检查元素是否隐藏了 class

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 classes 切换点击行为，例如我曾经在父级上设置点击监听器并委托给所有子级我相信 jquery 默认情况下现在正在做。无论如何，基于 css class 它将为 ex 触发一个事件。

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

现在，如果您想删除此行为，只需切换元素的 class 即可，它应该可以完成工作。前

$('.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

我会使用从 jQuery 3.0 开始弃用的 .on() and its opposite .off() methods to attach/detach the event handler. It is the recommended way since 1.7 instead of the .bind() and .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>

jQuery 有条件地删除触发器

jQuery delete trigger conditionally

javascript

jquery

eventtrigger