Javascript 如何避免多函数调用

我有单击事件函数来创建一个新的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);
});
}

var id=1；
$（'#create'）。在（'单击'，函数（）上）{
id++
$（'.players'）。追加（''）；
getId（）
});
函数getId（）{
$（'.new'）。在（'click'，function（）上{
变量id=$（this）.data（'id'））
警报（id）；
});
}

我的问题是我不想每次单击按钮时都运行

getId（）

函数，但如果我单独运行

getId（）

函数，新创建的超链接将不会影响该功能

无论如何，我可以调用

getId（）

函数一次。它仍然会影响一个新创建的超链接？

您只能使用该方法使用该函数一次

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

您可以使用方法仅使用该函数一次

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

---

使用委托，则无需每次追加时都附加事件处理程序函数。删除

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

var id=1；
$（'#create'）。在（'click'，函数（）{
id++；
$（'.players'）。追加（''）；
});
$（'.players'）。on（'click'，'.new'，函数（e）{
e、 预防默认值（）；
变量id=$（this）.data（'id'））
警报（id）；
});

---

使用委派，则无需每次附加事件处理程序函数。删除

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

var id=1；
$（'#create'）。在（'click'，函数（）{
id++；
$（'.players'）。追加（''）；
});
$（'.players'）。on（'click'，'.new'，函数（e）{
e、 预防默认值（）；
变量id=$（this）.data（'id'））
警报（id）；
});

尝试使用

动态元素

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

$（函数（）{
var-id=1；
$（'#create'）。在（'单击'，函数（）上）{
id++；
$（'.players'）。追加（''）；
});
$（文档）.on（'click'，'new'，函数（）{
//使用^document或您的父元素播放器
var id=$（this.data（'id'）；
警报（id）；
});
});
尝试使用
动态元素

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

$（函数（）{
var-id=1；
$（'#create'）。在（'单击'，函数（）上）{
id++；
$（'.players'）。追加（''）；
});
$（文档）.on（'click'，'new'，函数（）{
//使用^document或您的父元素播放器
var id=$（this.data（'id'）；
警报（id）；
});
});
我不明白，OP仍然需要为每个附加的元素调用
getId（）
。我不明白，OP仍然需要为每个附加的元素调用
getId（）
。我想是这样的-当我看到C-link的答案时，我想我看错了。很高兴能帮上忙。我想是的——当我看到C-link的答案时，我想我看错了。很高兴能帮忙。