Question

I know I can easily work around this, but I’m looking for the best practice in this case. This is a simplified version http://jsbin.com/isered/3/edit. 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.

Jquery/Javascript

$(function () {

   function foo () {
      $('a').on('click', function () {
      $('.asdf').append('poo');
    });
   }

   foo ();
   foo ();
});

HTML

<a href='#'>hello</a>
<a href='#'>world</a>

<p class='asdf'></p>

Answer 1

You could unbind the events before binding them:

function foo () {
  $('a').off('click').on('click', function () {
      $('.asdf').append('poo');       
  });
}

Though I don’t understand why calling the function once and only once is not the best solution.