Javascript jQuery有条件地删除触发器

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

隐藏类）：

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

我可以执行
jQuery（this）.unbind（'click'）
，但这会导致删除所有触发器，我只想删除当前触发器

当我面对这样的场景时，我通常会这样解决它（这是丑陋的，实际上并不会阻止代码执行，而是只处理代码的结果）：

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

提前谢谢
 您可以尝试以下方法：

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处理程序的侦听器，而不是所有连接到单击切换程序的事件。
您必须这样命名函数：

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

把它绑起来

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

然后，您可以使用以下方法解除绑定：

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

在不解除其他侦听器的绑定的情况下，您可以检查元素是否隐藏了类

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 clickEventHandler = function(){
  //your logic goes here
}

然后像这样移除它：

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

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

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

因此，所有这些都将起到关键作用：

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

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

Jquery
unbind
函数接受两个参数
eventType
和
handler

您可以将事件侦听器放入单独的函数中，如下所示：

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

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

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

添加侦听器作为引用后：

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

然后，您可以在以后的任何时间、任何地点解除特定处理程序的绑定：

jQuery（'toggler'）。取消绑定（'click'，clickEventHandler）
我过去所做的是使用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  
        }
    )

我将使用及其相反的方法来附加/分离事件处理程序。这是自1.7以来的推荐方式，而不是从jQuery 3.0开始就被弃用的和版本

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


$（“#切换器”）。在（“单击”上，函数（事件）{
log（'现在显示隐藏的元素'）；
$（'.hidden'）.removeClass（'hidden'）；
//如果（/*在此处添加您的条件*/）{
$（此）.off（事件）；
// }
});
。隐藏{
显示：无；
}

切换
隐藏的
是的，但这不是动态方式，它只解决给定的示例。谢谢你！啊哈！所以unbind有办法解决这个问题，很好。我会查出来的，谢谢！非常好，我认为这以最简洁的方式回答了我的问题，谢谢！相反，接受这个答案，因为当事情变得更复杂时（例如在触发器关闭后必须重新绑定触发器），它提供了一种更干净、更可读的方法。