具有相同类名的多个动态生成元素的单击事件以隐藏和取消隐藏其他元素答案

【问题标题】：Click event for multiple dynamically generated elements with the same class name to hide and unhide other elements具有相同类名的多个动态生成元素的单击事件以隐藏和取消隐藏其他元素
【发布时间】：2020-03-15 14:57:36
【问题描述】：

我正在尝试编写一个 JavaScript 或 jquery 函数，将点击事件绑定到动态或服务器生成的具有类名（管理库存）的元素。该函数应执行以下操作：

单击时，它应该在其下一个兄弟元素（管理库存卡）上切换引导类（d-none）。这里的关键是删除默认的“d-none”类，以便显示“manage-inventory-card”元素
当再次单击具有类名（manage-inventory）的元素时，应将类“d-none”添加回“manage-inventory-card”元素以隐藏它。
如果点击除“manage-inventory-card”之外的页面的任何部分，则应将“manage-inventory-card”、类名“d-none”添加回它。
单击另一个动态生成的具有相同类 (manage-inventory) 的元素应该关闭之前的“manage-inventory-card”，如果它仍然打开，则通过添加类“d-none”来关闭它。
该事件一次只能对“manage-inventory”和“manage-inventory-card”的一个实例起作用。单击一个不应使其同时对所有其他人起作用。只能有一个正在运行的实例

下面是服务器动态生成的HTML代码

该代码仅适用于在单击时切换“d-none”类。我不知道如何编写通过在单击另一个元素“manage-inventory”元素时将“d-none”添加到当前打开的“manage-investment-card”并编写关闭的代码来隐藏它的那个当点击页面的任何部分时。谢谢

$(document)
  .find(".manage-inventory")
  .each(function(index) {
    $(this).on("click", function() {
      $(this)
        .next()
        .toggleClass("d-none");
    });
  });

.d-none {display: none !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  N30,000.00
  <span class="manage-inventory">here</span>
  <div class="position-absolute manage-inventory-card d-none">
    <a class="edit">Edit</a>
    <a class="delete">Delete</a>
  </div>
</div>

<div>
  N30,000.00
  <span class="manage-inventory">here</span>
  <div class="position-absolute manage-inventory-card d-none">
    <a class="edit">Edit</a>
    <a class="delete">Delete</a>
  </div>
</div>

【问题讨论】：

请编辑我制作的 sn-p 并添加 CSS 以制作 minimal reproducible example

标签： javascript jquery html

【解决方案1】：

所以你需要委托。

我正在委托文档，因为您想检查文档的所有点击次数

$(document).on("click", function(e) {
  var $tgt = $(e.target);
  if ($tgt.is(".manage-inventory")) {
    var $thisChild = $tgt.next();
    $(".manage-inventory-card").not($thisChild).addClass("d-none");
    $thisChild.toggleClass("d-none");
  } else {
    $(".manage-inventory-card").addClass("d-none");
  }
});

.d-none {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  N30,000.00
  <span class="manage-inventory">here</span>
  <div class="position-absolute manage-inventory-card d-none">1
    <a class="edit">Edit</a>
    <a class="delete">Delete</a>
  </div>
</div>

<div>
  N30,000.00
  <span class="manage-inventory">here</span>
  <div class="position-absolute manage-inventory-card d-none">2
    <a class="edit">Edit</a>
    <a class="delete">Delete</a>
  </div>
</div>

【讨论】：