Javascript - 多次调用一个函数但只有一个效果

Question

我知道我可以轻松解决这个问题，但我正在寻找这种情况下的最佳实践。这是简化版http://jsbin.com/isered/3/edit 。我正在尝试创建一个可重用的函数，但我需要它，以便当触发事件(即单击 anchor 标记)时，它仅附加输出区域一次，而不是每次调用函数时都附加输出区域。

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

你可以unbind绑定(bind)之前的事件:

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

虽然我不明白为什么调用该函数一次且仅一次不是最好的解决方案。