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

点击li如下所示：

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

单击附加的[x]删除，总是返回循环计数器，因为那里有多少div。如果我已经添加/单击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);

jQuery：停止onclick循环附加链接

1 个答案: