Question

我不确定我在这里失踪了什么。

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

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

这是触发的代码：

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

您可以使用委派事件将click事件绑定到动态创建的元素。

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

Answer 2

您将click事件处理程序绑定到$('.coupon_options ul li')，此时此时不存在。（但稍后会在交互时添加），您必须稍后（在标记更新时）添加ventlistener，或者委托事件类似于您对$ body执行的操作并单击

Answer 3

在点击功能之前放置$selectPromo.html()并且它有效

＆＃13;

var $selectPromo = $('.coupon_options ul');
var $couponOptionsBox = $('.coupon_options_box');
$selectPromo.html('<li data-code="7073be"><a href="javascript:" class="great-bumper-stickers-sale-2017"><div class="coupon_name">Great Bumper Stickers Sale</div><div class="coupon_desc">Get your free 20% discount coupon valid bumper stickers orders above $100</div><div class="coupon_code">Promo Code: 7073be</div></a></li><li data-code="17fb5b"><a href="javascript:" class="gift-voucher-10-2017"><div class="coupon_name">Gift Voucher $10</div><div class="coupon_desc">Get a $10 discount on your purchase.</div><div class="coupon_code">Promo Code: 17fb5b</div></a></li>');

$couponOptionsBox.on('click', function() {
  $couponOptionsBox.addClass('active');
  $selectPromo.toggleClass('is_show');

  
});

$('.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);
});

$body.on('click', function(e) {
  if ($(e.target).closest('.coupon_options_box').length === 0) {
    $selectPromo.removeClass('is_show');
    $couponOptionsBox.removeClass('active');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://static.singaprinting.com/layout-test/ozstickerprinting/css/custom.css">

<div class="order_checkout_promocode">
  <div class="column">
    <p>Coupon</p>
  </div>
  <div class="column">
    <p class="promo-discount">-$8.99</p>
  </div>
  <div class="column">
    <div class="coupon_options">
      <span class="coupon_options_box">Select Coupon</span>
      <ul>

      </ul>
    </div>
  </div>
</div>

＆＃13;

创建新列表项时，列表项单击不会触发

3 个答案: