vanilla js 中的 JQuery 事件委托

Question

我在事件委托方面遇到了一个奇怪的情况，原因是元素被动态添加到 DOM 中。单击按钮打开模式

为了快速解释此代码，有一个用于桌面和移动设备的模态抽屉，并且此处都选择了两者，并且单击事件附加到两个模态内的颜色样本。模态框通过 js 动态添加到 DOM

现在让我困惑的部分是 currentTarget 是文档，如果我使用 e.target，这将是首先单击以打开模式的按钮。

为了打开模态，必须单击按钮，因此通过事件委托，currentTarget是文档，目标是按钮本身，所以我真的不知道如何将事件监听器附加到模态中的.swatch 。

$(document).on('click', '.modal-desk__content .swatch, .modal-mobile__content .swatch', e => {
   const $swatch = $(e.currentTarget);
   $('.product-form').find('.swatch[data-value="' + $swatch.data('value') + '"]').click();
   $swatch.closest('.swatches').find('.swatch').removeClass('selected');
   $swatch.addClass('selected');
})

Answer 1

我对这一切的思考都是错误的并且想得太多了。这是为遇到此问题的其他人提供的重构版本

document.addEventListener('click', e => {
   if (e.target.closest('.swatch')) {
      const $swatch = e.target.closest('.swatch')
      document.querySelector(`.product-form .swatch[data-value="${$swatch.dataset.value}"]`).click()

      $swatch.closest('.swatches .swatch').classList.remove('selected')
      $swatch.classList.add('selected')
   }
})