創建新列表項時，列表項不會觸發

當沒有新項目時，我的代碼工作正常。

但是當我編輯列表中單擊將不再觸發。

這是觸發代碼：

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

請幫助。謝謝

來源

2017-09-13 simple guy

請添加html代碼。 – RRK

你是什麼意思'當我編輯'在通過腳本在稍後的點？ – Dellirium

最後一個小提琴提供錯誤'$ body is not defined' –

您可以使用委託事件將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

來源

2017-09-13 08:36:00

謝謝。它的工作原理 –

接受和投票的ans如果其helpful.Happy編碼:)。 –

你結合的Click事件處理程序$('.coupon_options ul li')中不存在的那一刻。（但後來是在互動添加），您必須添加ventlistener，後來（上標記更新），或類似的事件委託給您$身體做什麼，然後單擊

來源

2017-09-13 08:36:21 user2520818

謝謝。委託我的作品 –

點擊功能之前把$selectPromo.html()和它的作品

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

<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>

來源

2017-09-13 08:40:25 SilverSurfer

沒有。我需要點擊'$ selectPromo.html（）'，因爲我要動態地改變內容。但是謝謝你。我已經得到了我的答案 –

創建新列表項時，列表項不會觸發

回答

相關問題