j查询删除触发器有条件

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);

这种调用取消绑定的方式是，仅删除 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);

更多关于 HTML DOM removeEventListener() 方法

Answer 5

Jqueryunbind函数接受 2 个参数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

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