如何避免多个函数调用答案

【问题标题】：How to avoid multiple function call如何避免多个函数调用
【发布时间】：2014-01-22 20:29:01
【问题描述】：

我有点击事件函数来创建一个新的 dom 元素。基本上，每次我点击一个按钮。它允许创建一个新的超链接标签。

我还想要一个功能，如果点击新创建的超链接，我想调用不同的函数。

请看下面的代码，

var id = 1;

$('#create').on('click', function() {
   id ++ 
   $('.players').append('<a href="#" class="new" data-id='+ id + '> ' + id + 'player</a>');

   getId() 

 });

function getId() {
   $('.new').on('click', function() {
   var id = $(this).data('id')
   alert(id);
});
}

我的问题是我不想每次单击按钮时都运行getId() 函数，但如果我单独运行getId() 函数，新创建的超链接不会影响该功能。

无论如何我可以调用getId() 函数一次。并且它仍然会影响新创建的超链接？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用one方法只使用一次该功能。

function getId() {
   $('.new').one('click', function() {
   var id = $(this).data('id')
   alert(id);
});

【讨论】：

我不明白，OP 仍然需要为每个附加的元素调用 getId()。

【解决方案2】：

使用委托，则无需每次追加时都附加事件处理函数。删除您的 getId() 函数并将其替换为委托的 on() 方法：

var id = 1;

$('#create').on('click', function () {
    id++;
    $('.players').append('<a href="#" class="new" data-id=' + id + '> ' + id + 'player</a>');
});

$('.players').on('click', '.new', function(e) {
    e.preventDefault();
    var id = $(this).data('id')
    alert(id);
});

JSFiddle

【讨论】：

我是这么认为的——当我看到 C-link 的答案时，我以为我看错了。很高兴能帮上忙。

【解决方案3】：

尝试将on() 用于dynamic elements 之类的，

$(function(){
    var id = 1;
    $('#create').on('click', function() {
       id ++;
       $('.players').append('<a href="#" class="new" data-id='+id+'>'+id+'player</a>');
    });

    $(document).on('click','.new', function() {
  //use ^ document or your parent element players
       var id = $(this).data('id');
       alert(id);
    });
});

【讨论】：