クリックイベントなしで動的に作成されたアイテムを関数内で処理する方法はありますか？

Question

内部をクリックして閉じることを試みているドロップダウンボックスで、clicking outside boxで閉じる必要があります。
問題は、動的に作成された箱であるので、私はこのコードを使用してアクセスすることはできません。

$('body').on('click', function(e) { 
    if (!$('#products .add-to-cart').is(e.target) && 
    $('#products .add-to-cart').has(e.target).length === 0 && 
    $('.open').has(e.target).length === 0 
) { 
    $('#products .add-to-cart').removeClass('open'); 
    } 
}); 

私のHTMLコード：あなたが得るためにdocumentオブジェクトを使用する必要が

<div class="button-group dropup"> 
    <button type="button" class="add-to-cart dropdown-toggle" id="add-to-cart-{{ product.product_id }}"><i class="fa fa-cart-plus"></i></button> 
    <div id="options-{{ product.product_id }}" class="options-popup dropdown-menu"> 
    <a class="cls" href="#" id="close-add-to-basket"><i class="fa fa-times-circle"></i></a> 

Answer 1

新しい作成されたボックス要素、ここでは動作例です：

$(document).on('click', '#close-add-to-basket', function(e) { 
    e.preventDefault(); 
    $(document).find('#products .add-to-cart').removeClass('open'); 
});