Question

我有点击事件功能来创建一个新的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()一次功能。它还会影响一个新创建的超链接吗？

Answer 1

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

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

Answer 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

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

如何避免多个函数调用

3 个答案: