jQuery: Остановить onclick looping на добавленной ссылке

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. 

Щелкнув приложил [х], чтобы удалить, всегда возвращают зацикливание счетчик, как, сколько ДИВ там. Если я добавил/клик ли 3 раза, тогда, когда я нажимаю на один из [x], предупреждение всегда отображается 3 раза, а значение счетчика уменьшается случайно или что-то до 2,0, -1 и т. Д. Как это решить? Или я что-то пропустил?

Answer 1

Необходимо переместить событие делегирования за пределы li обработчик события click. Каждый раз, когда вы нажимаете li, вы привязываете событие click к 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);