title: Javascript - call a function multiple times but only have one effect
body: <p>I know I can easily work around this, but I'm looking for the best practice in this case.  This is a simplified version <a href="http://jsbin.com/isered/3/edit" rel="nofollow">http://jsbin.com/isered/3/edit</a>.  I'm trying create a function for reuse but I need it so that when the event is triggered (i.e. clicking on the anchor tag), it only appends the output area once, not for each time the function has been called.</p>
  
  <p><strong>Jquery/Javascript</strong></p>
  
  <pre><code>$(function () {
  
     function foo () {
        $('a').on('click', function () {
        $('.asdf').append('poo');
      });
     }
  
     foo ();
     foo ();
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href='#'&gt;hello&lt;/a&gt;
  &lt;a href='#'&gt;world&lt;/a&gt;
  
  &lt;p class='asdf'&gt;&lt;/p&gt;
  </code></pre>