只运行一次javascript函数

Question

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

Answer 1

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." );
});

Answer 2

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.

Answer 3

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.