Javascript jQuery-在嵌套的重复类上单击事件，但仅单击1次事件

我正在制作一个自定义模式，我有一个HTML结构和一个覆盖，在覆盖中我有一个模式和一个关闭按钮，如下所示：

<div class="overlay close-project">
   <div class="modal"> 
     <button class="close-project">Close</button>
   </div>
</div>

---

我已经通过在类名和数据目标中添加一个变量使modals变得唯一，这样就可以很容易地区分它们。我有一种感觉，我正在想办法解决这个问题。

$(document).on('click', ".close-project", function(e) {
   e.stopPropogation(); //Stop the event from bubbling
   if($(this).data('target-project')) {
       closeProjectModal($(this).data('target-project'))
   } else {
       closeProjectModal(null)
   }
});

---

这正是我要找的！谢谢，阿洛蒂在工作。我现在遇到的唯一一件事是，当我点击覆盖时，我无法知道该选择哪个模态close@Rainierlaan看起来你的覆盖覆盖了所有的情态动词？我说的对吗？@rainierra干得好！

function closeProjectModal($project) {
  alert($project)

  let destination = $('.project-' + $project);
  destination.removeClass('animate__animated animate__zoomIn animate__faster').addClass("animate__animated animate__faster animate__zoomOut");

  setTimeout(function () {
      destination.addClass("hidden");
      destination.removeClass("animate__animated animate__faster animate__zoomOut");
      $('.overlay').delay(300).addClass('hidden')
  }, 300)
  $('html body').removeClass("overflow-hidden");
}

$(document).on('click', ".close-project", function() {
   if($(this).data('target-project')) {
       closeProjectModal($(this).data('target-project'))
   } else {
       closeProjectModal(null)
   }
});

$(document).on('click', ".close-project", function(e) {
   e.stopPropogation(); //Stop the event from bubbling
   if($(this).data('target-project')) {
       closeProjectModal($(this).data('target-project'))
   } else {
       closeProjectModal(null)
   }
});