如何避免多個函數調用

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

使用委託，那麼每次追加時都不需要附加事件處理函數。刪除您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 2

您可以使用one方法將該功能僅用於一次。

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

Answer 3

嘗試使用​​爲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); 
    }); 
});