如果功能激活多次，则停止输出打印多次答案

【问题标题】：Stop output printing multiple times if function activated more than once如果功能激活多次，则停止输出打印多次
【发布时间】：2014-12-04 14:22:44
【问题描述】：

我正在使用 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/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 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);
        })
    }
});

【讨论】：