如何在一个元素集合上只注册一次单击事件

Question

如何在元素集合上只注册一次点击事件？

$(".UFIReplyLink").on("click", function() {
alert('bound once')
});

这里和这里已经记录了单个对象的一些选项，但我想在集合上做这件事

我尝试过使用.one，但没有成功

var collectLinks = function() {
$(".UFIReplyLink").one("click", function() {
console.log('one...') // this will log however many seconds have passed
});
}
setInterval(collectLinks, 1000)

Answer 1

.one((：将处理程序附加到元素的事件。每个元素每个事件类型最多执行一次处理程序。

您可以使用one()事件，如：

$(".UFIReplyLink").one("click", function() {
alert('bound once')
});

$(".UFIReplyLink").one("click", function() {
alert('bound once')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="UFIReplyLink"> ELEMENT 1 </span>
<br>
<span class="UFIReplyLink"> ELEMENT 2 </span>
<br>
<span class="UFIReplyLink"> ELEMENT 3 </span>
<br>
<span class="UFIReplyLink"> ELEMENT 4 </span>

Answer 2

只要点击按钮，就附加一个类名怎么样？这样您就可以检查元素上是否存在类名。

$(".btn").click(function(){
if ($(".my_item").hasClass("clicked")) {
console.log("Already clicked me before!");
} else {
$(".my_item").addClass("clicked");
$(".my_item").text("Clicked! Try clicking me again...");
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
<div class="my_item">I have never been clicked...</div>

Answer 3

您可以使用事件委派，其中事件被附加到父元素，选择器被指定在子元素上执行事件。如果子元素是动态插入的，它还会执行事件。

请参阅这篇不错的文章，了解Javascript中解释的事件委派。

function addEvent()
{
$("#main").off("click").delegate("span", "click", function(event) {
console.log($(event.target).html())
});
}
setInterval(addEvent,1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<span class="UFIReplyLink"> ELEMENT 1 </span>
<br>
<span class="UFIReplyLink"> ELEMENT 2 </span>
<br>
<span class="UFIReplyLink"> ELEMENT 3 </span>
<br>
<span class="UFIReplyLink"> ELEMENT 4 </span>
</div>

Answer 4

您可以像使用$(this).unbind("click");一样使用.unbind来阻止点击事件在您点击的按钮上触发：

$(".UFIReplyLink").on("click", function() {
alert('bound once');
$(this).unbind("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="UFIReplyLink">Button1</button>
<button class="UFIReplyLink">Button2</button>
<button class="UFIReplyLink">Button3</button>