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