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

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