jquery - 如何在没有点击事件的情况下处理功能内部动态创建的项目？

在一个试图不通过单击内部将其关闭的下拉框中，我想通过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代码：

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

最佳答案

您必须使用document对象才能获取新创建的box元素，这是一个有效的示例：

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

关于jquery - 如何在没有点击事件的情况下处理功能内部动态创建的项目？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47338272/