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

Question

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

So what you want is for each item in the collection, register the click only once? http://api.jquery.com/one/ — Huangism, Jul 17 '18 at 13:56
@Huangism yes. so if this function is called multiple times the click event is only registered once — user2954587, Jul 17 '18 at 13:57
Please look at the link I provided in comment, I am sure there is a duplicate question I am just having trouble finding it. Or just remove the click bound to the clicked element — Huangism, Jul 17 '18 at 13:58
Possible duplicate of [In jQuery, is there any way to only bind a click once?](https://stackoverflow.com/questions/2947218/in-jquery-is-there-any-way-to-only-bind-a-click-once) — Huangism, Jul 17 '18 at 13:59
I suggest you bind a single event to a parent element, even if that's the body. The technique is called "event delegation" -- you bind once, and the events from the items in the collection bubble up to the parent, even if items are added to the collection after the initial bind. — Chris Baker, Jul 17 '18 at 14:05
Can't you use `.unbind("click")` once the button is clicked? Stopping all future clicks on the class `UFIReplyLink` ? — Nick Parsons, Jul 17 '18 at 14:07

Zakaria Acharki · Answer 1 · 2018-07-17T14:14:15.870

0

.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>

edited Jul 17 '18 at 14:14

answered Jul 17 '18 at 14:09

Zakaria Acharki

66,747
15
75
101

Not sure now what you're trying to achieve? using one will unbind the event from every element in the collection is clicked. – Zakaria Acharki Jul 17 '18 at 14:15

Luay · Answer 2 · 2018-07-17T14:21:25.377

0

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>

edited Jul 17 '18 at 14:21

answered Jul 17 '18 at 14:16

Luay

789
4
15

These must be posted in comments. Else post it clearly with examples – Vignesh Raja Jul 17 '18 at 14:16
Oh god I always comment, why the helll did I do this haha. My apologies. – Luay Jul 17 '18 at 14:19
@VigneshRaja Is it better now? May I get the downvote novoted :D? – Luay Jul 17 '18 at 14:24

score 0 · Answer 3 · answered Jul 17 '18 at 14:38

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>

Nick Parsons · Answer 4 · 2018-07-17T15:47:09.227

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>

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

4 Answers4