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

Question

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

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

单个对象的一些选项已被记录为here和here，但我想在集合中进行

我尝试过使用.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

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

Refer this nice article知道在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

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

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