JQuery remove trigger conditionally

Question

I was wondering if Javascript or jQuery has a way to remove the event listener. Suppose I want to create a function that I want to run only once, for example, suppose I have a button that shows some hidden elements in a document, I would make this function (assuming that the hidden elements have a hiddenclass that their hides):

jQuery('#toggler').click(function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
});

Simple enough, right? Now my actual problem comes up , I don’t want jquery to run this function again and again every time the button is clicked, because the elements are already detected, so there is a clean way to do it? So, in this example, after pressing the toggler button several times, I want to receive only one console message.

I could do it jQuery(this).unbind('click'), but this removes ALL triggers, and I only want to delete the current trigger.

What I usually do when I come across such scenarios resolves it this way (it is ugly and does not actually prevent code execution , but only processes code results):

var toggler_clicked = false;
jQuery('#toggler').click(function() {
    if(toggler_clicked) return;

    toggler_clicked = true;
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
});

Also I do not want to use jQuery onebecause I will have the same problem when I need to remove the trigger conditionally, so if you can help, please give me a dynamic answer.

Thanks in advance!

Answer 1

You should name your function as follows:

var myFunction = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
};

And tie it that way

jQuery('#toggler').click(myFunction);

:

jQuery('#toggler').off('click',myFunction);

Answer 2

:

var myFunc = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery(this).unbind('click', myFunc);
};
jQuery('#toggler').click(myFunc);

unbind , myFunc, , .

Answer 3

. on() .off() / . 1.7 . Bind() .unbind(), jQuery 3.0.

$("#toggler").on("click", function(event) {
  console.log('Hidden elements are now shown');
  $('.hidden').removeClass('hidden');
  // if (/* Add your condition here */) {
    $(this).off(event);
  // }
});

$("#toggler").on("click", function(event) {
  console.log('Hidden elements are now shown');
  $('.hidden').removeClass('hidden');
  // if (/* Add your condition here */) {
    $(this).off(event);
  // }
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggler">Toggle</button>
<div class="hidden">
HIDDEN
</div>

Hide result

Answer 4

var myFunction = function() {
        console.log('Hidden elements are now shown');
        jQuery('.hidden').removeClass('hidden');
    };

:

 jQuery('#toggler').addEventListener("click", myFunction);

:

jQuery('#toggler').removeEventListener("click", myFunction);

, :

var myFunction = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery('#toggler').removeEventListener("click", myFunction);
};

jQuery('#toggler').addEventListener("click", myFunction);

HTML DOM removeEventListener()

Answer 5

JQuery unbind 2 eventType handler

:

var clickEventHandler = function(){
  //your logic goes here
}

:

jQuery('#toggler').click(clickEventHandler);

, , , , :

jQuery('#toggler').unbind('click', clickEventHandler);

Answer 6

, , - css, , , , , jquery . , css, ex.

$('.some-parent-element').on(
   'click', 
    'the-behavior-css-class', 
    function() { // do stuff here.... }
)

, , .

$('.some-parent-element').on(
       'click', 
        'hide-me-on-click-or-whatever', 
        function() { 
            $(this).toggleClass('hide-me-on-click-or-whatever')
            // perform the action  
        }
    )

Answer 7

,