How to trigger toggle() only once on all elements?

Question

How can I only trigger toggle once?

I have...

<%= f.check_box :push %>
<label for="challenge_push" class="reminder-choices">Push</label>
<%= f.check_box :message %>
<label for="challenge_message" class="reminder-choices">Text</label>
<%= f.check_box :mail %>
<label for="challenge_mail" class="reminder-choices">Email</label>

<script>
  $('.reminder-choices').click(function(){
    $(".hide-remind").toggle();
  });
</script>

I tried...

# Same behavior as above. Still toggles back and forth.
$('.reminder-choices').one("click", function(){
    $(".hide-remind").toggle();
});

In other words, once .reminder-choices is clicked once then toggle will work otherwise if it is clicked again then it will not work.

`one()` should work fine - although note that that's one event fired per `.reminder-choices` element. If you only want to fire one click for *all* of them you'll need to unbind the event. It would help to see a working sample of the problem, including your HTML — Rory McCrossan, Apr 26 '17 at 07:09
The other SO questions on this subject seem to be trying to avoid this behavior and I can't replicate their problem as my solution http://stackoverflow.com/questions/24426883/animate-jquery-toggle-only-once-per-call — AnthonyGalli.com, Apr 26 '17 at 07:10
In your edited HTML `reminder-choices` is an `id`, therefore the selector in your jQuery should be using `#`, not `.` — Rory McCrossan, Apr 26 '17 at 07:14
So you want the `click` event to be ignored on all elements after you clicked one of them? — Marijan, Apr 26 '17 at 07:16

Marijan · Accepted Answer · 2017-04-26T07:18:09.340

3

Your second try should work. You could also do it like this.

$('.reminder-choices').on('click.reminder', function() {

    $(".hide-remind").toggle();
    $(this).off('click.reminder');
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="reminder-choices">Click Here</div>
<div class="hide-remind">Will be toggled</div>

Edit: If you have multiple elements and want clicks to be ignored on all elements after one of them has been clicked:

$('.reminder-choices').on('click.reminder', function() {

    $(".hide-remind").toggle();
    $('.reminder-choices').off('click.reminder');
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="reminder-choices">Click Here</div>
<div class="reminder-choices">Or Here</div>
<div class="reminder-choices">Or Here</div>

<div class="hide-remind">Will be toggled</div>

edited Apr 26 '17 at 07:18

answered Apr 26 '17 at 07:09

Marijan

1,825
1
13
18

FYI `bind()` and `unbind()` were deprecated a *long* time ago. You should use `on()` and `off()` instead. – Rory McCrossan Apr 26 '17 at 07:12
Thx @RoryMcCrossan – didn’t use jQuery for a ***long*** time. ;-) – Marijan Apr 26 '17 at 07:12
If I could +2 then I would, purely for the use of namespaces. – Reinstate Monica Cellio Apr 26 '17 at 07:55

score 0 · Answer 2 · answered Apr 26 '17 at 07:20

Wrap your code in a container then delegate the event.

$('.container').one('click', '.reminder-choices', function() {
  $(".hide-remind").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="reminder-choices">Click Here</div>
  <div class="reminder-choices">Or Here</div>
  <div class="reminder-choices">Or Here</div>
</div>
<div class="hide-remind">Will be toggled</div>

How to trigger toggle() only once on all elements?

2 Answers2