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

Question

How can you register a click event on a collection of elements only once?

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

Some options on a single object have been documented here and here but I'd like to do it on a collection

I've tried using .one with no luck

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

Answer 1

.one() : Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

You could use the one() event like :

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

How about attaching a class name whenever a button is clicked on? So that you can check if the class name exists on the element.

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

You can use the Event Delegation , where the event is attached to the parent element and the selector is specified to perform the event on the child elements. It also performs the events if the child elements are inserted dynamically.

Refer this nice article to know about the event delegation explained in 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

You can use .unbind like so $(this).unbind("click"); to stop the click event from triggering on the button which you click on:

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