jQuery：停止onclick循環附加鏈接

Question

如何阻止此循環點擊？

$('li').on('click',function(){ 
    var elements = $('.elements'), 
     elcounts = $(this).closest('ul').attr('data-counter'), // default = 0 
     elupdate = Number(elcounts)+1, // increase count by 1 
     eldata = $(this).attr('data-element'); 
    elements.append('<div><a href="#">x</a>'+eldata+'</div>'); 
    $(this).closest('ul').attr('data-counter',elupdate); 

    elements.on('click','a',function(){ 
     var ulId = $(this).attr('data-ulsource'), 
      ulelement = $('ul#'+ulId), 
      countsCurrent = ulelement.attr('data-counter'), // get current counters 
      countsUpdate = Number(countsCurrent)-1; // decrease count by 1 
     ulelement.attr('data-counter',countsUpdate); 
     $(this).parent().remove(); 
     alert(countsUpdate); // testing this 
     return false; 
    }); 
} 

點擊李看起來是這樣的：

[x] Data1, [x] Data2, [x] Data3 etc. 

單擊附加一個[X]刪除，總是返回櫃檯循環有多少格在那裏。 如果我已經添加/點擊li 3次，那麼當我點擊其中一個[x]時，警報將始終顯示3次，並且計數器值隨機降低或降至2,0，-1等。 如何解決此問題？或者我在這裏錯過了什麼？

Answer 1

您需要將事件代理移出li以外的點擊事件處理程序。每次點擊li，你都會將一個點擊事件綁定到a因此循環。

使用

$('li').on('click', function() { 
    var elements = $('.elements'), 
     elcounts = $(this).closest('ul').attr('data-counter'), // default = 0 
     elupdate = Number(elcounts) + 1, // increase count by 1 
     eldata = $(this).attr('data-element'); 
    elements.append('<div><a href="#">x</a>' + eldata + '</div>'); 
    $(this).closest('ul').attr('data-counter', elupdate); 
}); 
$('.elements').on('click', 'a', function() { 
    var ulId = $(this).attr('data-ulsource'), 
     ulelement = $('ul#' + ulId), 
     countsCurrent = ulelement.attr('data-counter'), // get current counters 
     countsUpdate = Number(countsCurrent) - 1; 
    //decrease count by 1 
    ulelement.attr('data-counter', countsUpdate); 
    $(this).parent().remove(); 
    alert(countsUpdate); // testing this 
    return false; 
}); 

此外，我會建議你使用.data()，而不是像.attr()

var countsUpdate = ulelement.data('counter'); 
ulelement.data('counter', countsUpdate);