Javascript 列表项单击不'；创建新列表项时不会触发

我不确定我错过了什么

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

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

这是触发的代码：

$('.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);
});

---

请帮忙。谢谢

您可以使用委托事件将单击事件绑定到动态创建的元素

$('.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);
});

---

您可以使用委托事件将单击事件绑定到动态创建的元素

$('.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);
});

---

您正在将单击事件处理程序绑定到当前不存在的

$（'.优惠券选项ul li'）

。（但稍后会在交互时添加），您必须稍后（在标记更新时）添加ventlistener，或委托类似于您对$body所做的操作的事件，然后单击您正在将单击事件处理程序绑定到

$（'.优惠券选项ul li'）

，此时不存在。（但稍后会在交互时添加），您必须在稍后（在标记更新时）添加ventlistener，或委托类似于您对$body所做的操作的事件，并在单击函数之前单击Put

$selectPromo.html（）

var$selectPromo=$（'.优惠券选项ul'）；
var$couponOptionsBox=$（'.coupon\u options\u box'）；
$selectPromo.html（'
）；
$couponOptionsBox.on（'click'，function（））{
$couponOptionsBox.addClass（'active'）；
$selectPromo.toggleClass（'is_show'）；
});
$（'.优惠券选项ul li'）。在（'click'，function（）上{
$selectPromo.removeClass（'is_show'）；
$couponOptionsBox.addClass（'active'）；
$（this.parent（）.find（'li a'）.removeClass（'selected'）；
$（this.find（'a'）.addClass（'selected'）；
所选变量=$（此）.data（'code'）；
$couponOptionsBox.html（选中）；
});
$body.on（'click'，函数（e）{
如果（$（e.target）.最近（'.优惠券选项框'）。长度===0）{
$selectPromo.removeClass（'is_show'）；
$couponOptionsBox.removeClass（'active'）；
}
});

息票

-8.99美元
选择优惠券


在单击函数之前放置
$selectPromo.html（）
，它就会工作
var$selectPromo=$（'.优惠券选项ul'）；
var$couponOptionsBox=$（'.coupon\u options\u box'）；
$selectPromo.html（'
）；
$couponOptionsBox.on（'click'，function（））{
$couponOptionsBox.addClass（'active'）；
$selectPromo.toggleClass（'is_show'）；
});
$（'.优惠券选项ul li'）。在（'click'，function（）上{
$selectPromo.removeClass（'is_show'）；
$couponOptionsBox.addClass（'active'）；
$（this.parent（）.find（'li a'）.removeClass（'selected'）；
$（this.find（'a'）.addClass（'selected'）；
所选变量=$（此）.data（'code'）；
$couponOptionsBox.html（选中）；
});
$body.on（'click'，函数（e）{
如果（$（e.target）.最近（'.优惠券选项框'）。长度===0）{
$selectPromo.removeClass（'is_show'）；
$couponOptionsBox.removeClass（'active'）；
}
});

息票

-8.99美元
选择优惠券


请同时添加html代码。稍后通过脚本中的“当我编辑”是什么意思？最后一个fiddle提供错误
$body未定义
@RejithRKrishnan在fiddle链接中找到的html代码还不够吗？@RejithRKrishnan html代码。请同时添加html代码。当我编辑“稍后通过脚本中的某个点？”最后一个fiddle提供错误
$body未定义
@RejithRKrishnan是否在fiddles中包含HTML？在jsfiddle links.no中找到@RejithRKrishnan HTML代码。我需要在内部单击
$selectPromo.html（）
，因为我要动态更改内容。但是谢谢你。我已经得到了答案。我需要在内部单击
$selectPromo.html（）
，因为我要动态更改内容。但是谢谢你。我已经得到了答案