停止输出打印多次，如果功能激活不止一次

Question

我激活与一个jQuery的onclick按钮的JavaScript函数：

$('#on').click(function() { 

var a = document.getElementsByTagName('a'); 

for (i = 0; i < a.length; i++) { 
    a[i].addEventListener('click', function() { 
    var span = document.createElement('span'); 
    var text = document.createTextNode(this.innerHTML + " "); 
    span.appendChild(text); 
    document.getElementsByClassName('output')[0].appendChild(span); 
    }) 
} 
    }); 

的问题是，如果按钮被点击超过一次的功能将更多的重复比一次。在这种情况下，它将多次打印输出。我如何修改javascript函数以仅打印每个点击一个字符？

例子： http://jsfiddle.net/874Ljaq1/

Answer 1

您可以使用jQuery的.data()功能设置标志的按钮被点击一次，当且仅当未设置标志进行。

代码：

$('#on').click(function() { 
    // if we have a flag that indicates this button has been clicked before, 
    // don't do anything. 
    if ($(this).data('clicked')) 
     return; 
    $(this).data('clicked', true); // set the flag 
    var a = document.getElementsByTagName('a'); 

    for (i = 0; i < a.length; i++) { 
     a[i].addEventListener('click', function() { 
      var span = document.createElement('span'); 
      var text = document.createTextNode(this.innerHTML + " "); 
      span.appendChild(text); 
      document.getElementsByClassName('output')[0].appendChild(span); 
     }) 
    } 
}); 

Answer 2

使用jQuery的事件绑定方法one

$('#on').one("click", function() { 

    var a = document.getElementsByTagName('a'); 

    for (i = 0; i < a.length; i++) { 
     a[i].addEventListener('click', function() { 
      var span = document.createElement('span'); 
      var text = document.createTextNode(this.innerHTML + " "); 
      span.appendChild(text); 
      document.getElementsByClassName('output')[0].appendChild(span); 
     }) 
    } 
});