Событие щелчка для нескольких динамически генерируемых элементов с одинаковым именем класса, чтобы скрыть и показать другие элементы

Question

Я пытаюсь написать функцию JavaScript или jquery, которая связывает событие click с динамически или сгенерированным сервером элементом с именем класса (manage-инвентарь). Функция должна выполнять следующее:

• При щелчке она должна переключать класс bootstrap (d-none) на своем следующем элементе-брате (manage-инвентарь-card). Ключевым моментом здесь является удаление класса «d-none» по умолчанию, чтобы элемент «manage-inventory-card» показывал

• Когда элемент с именем класса (manage -inventory), если щелкнуть снова, следует добавить класс "d-none" обратно к элементу manage-inventory-card, чтобы скрыть его.

• Если какая-либо часть при нажатии на страницу, кроме «карты управления запасами», к ней необходимо добавить «карту управления запасами», имя класса «d-none».

• Щелчок по другому динамически генерируемому элементу с тем же классом (manage-инвентарь) должен закрыть предыдущую «карту управления запасами», если она все еще открыта, закрыв ее с добавлением класса «d-none».

• Событие должно работать только для одного экземпляра «manage-инвентаризации» и «manage-инвентаризации-карты» одновременно. Нажатие не должно заставить его работать на всех других одновременно. Может быть только работающий экземпляр

Ниже приведен код HTML, когда он динамически генерируется сервером

Код работает только для переключения "d "Нет" класс, когда он нажал. Я не знаю, как написать тот, который скрывает его, добавив «d-none» к открытой в данный момент «manage-investment-card» при нажатии на другой элемент «manage-инвентарь», а также написать закрывающий код это когда любая часть страницы нажата. Спасибо

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

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