javascript - 创建新列表项时不会触发列表项点击

Question

我不确定我在这里缺少什么。

当没有新项目时，我的代码工作正常。

Sample of items

但是当我编辑列表时，点击将不再触发。

Sample of edited items

这是触发的代码:

$('.coupon_options ul li').on('click', function(){
  $selectPromo.removeClass('is_show');
  $couponOptionsBox.addClass('active');

  $(this).parent().find('li a').removeClass('selected');
  $(this).find('a').addClass('selected');

  var selected = $(this).data('code');
  $couponOptionsBox.html(selected);
});

请帮忙。谢谢

Answer 1

您可以使用委托(delegate)事件将点击事件绑定(bind)到动态创建的元素。

$('.coupon_options ul').on('click','li', function() {
  $selectPromo.removeClass('is_show');
  $couponOptionsBox.addClass('active');

  $(this).parent().find('li a').removeClass('selected');
  $(this).find('a').addClass('selected');

  var selected = $(this).data('code');
  $couponOptionsBox.html(selected);
});

Working Fiddle