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

Question

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

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

您可以像这样使用.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>