I have this simple javascript function:

<script type="text/javascript">
    var popup = '0';
    if(popup == '0') {
       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                  alert('test');
                  popup = '1';
            });
       }); 
    }
</script>

<button class="button">Test</button>

I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1

I have this simple javascript function:

<script type="text/javascript">
    var popup = '0';
    if(popup == '0') {
       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                  alert('test');
                  popup = '1';
            });
       }); 
    }
</script>

<button class="button">Test</button>

I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1

• javascript
• jquery

• -1 this is covered in the jQuery docs api.jquery.com/one – Evan Davis Commented May 25, 2014 at 21:06
• 1 @Mathletics: What's the problem? The question itself is very valid. – jsalonen Commented May 25, 2014 at 21:08
• @jsalonen IMO, SO is mature enough that answering simple queries like this is no longer of value. This question is about the inability to ask questions ("How can I execute a function only once?" Though to be fair it is well represented in the title) and not about a unique programming problem. – Evan Davis Commented May 25, 2014 at 21:11
• 4 I see your point. If you think this is not a unique programming problem, point us to a duplicate and we can proceed with closing vote. Also I need to say I prefer seeing SO as a growing community, where new users are embraced in favor of Stackoverflow "dogma". You may disagree and that's okay. And in fact that's why we vote so here is my +1 for a question I consider worthy of an answer. – jsalonen Commented May 25, 2014 at 21:21

3 Answers 3

What you need is .one() function. It makes sure the code is triggered only once for you.

Docs: http://api.jquery.com/one/

Docs example:

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

Write the code as follows:

<script type="text/javascript">
    var popup = '0';

     $(document).ready(function () {     
          $(document).on('click', '.button', function(){
             if(popup == '0') {
                alert('test');
                popup = '1';
             }
          });
     }); 
</script>

Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.

Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:

<script type="text/javascript">
    var popup = '0';

     $(document).ready(function () {     
          $(document).on('click', '.button', function(){
              alert('test');

              //unbinds *all* listeners previously registered on "document"
              $(document).unbind('click');
          });
     }); 
</script>

Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.

Try:

<script type="text/javascript">
    var popup = '0';

       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                if(popup == '0') {
                  alert('test');
                }
                  popup = '1';
            });
       }); 
</script>

You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.