Почему «шоу / показ / скрыть / скрытый.bs.collapse» не запускается на моем вложенном элементе свертывания?

Question

У меня есть кнопка. Нажатие на кнопку сворачивает div. В этом свернутом div есть еще одна кнопка. При нажатии на эту кнопку она сворачивается еще один div.

Теперь крах и все, что работает нормально, у меня проблема в событиях.

Я пытался:

  // this fires when I click parent button, 
  // but it also fires when I click the child button << problem
  $("#parentDiv").on("show.bs.collapse", () => {
      console.log("parent");
    });

  // this never fires << problem
  $("#childDiv").on("show.bs.collapse", () => {
      console.log("child");
    });

Html

<button data-toggle="collapse" data-target="#parentDiv" aria-controls="parentDiv"
        aria-expanded="false" aria-label="Toggle parent">Show parent
</button>

<div class="collapse" id="parentDiv">
  <p>This is the parent</p>

  <button data-toggle="collapse" data-target="#childDiv" aria-controls="childDiv" 
          aria-expanded="false" aria-label="Toggle child">Show child
  </button>

  <div class="collapse" id="childDiv">
    <p>This is the child</p>
  </div>
</div>

Что я в итоге использовал и почему.

Сначала я попытался использовать принятый ответ, поскольку именно так это и должно быть сделано, до плохого, что jQuery не работает хорошо, когда я меняю маршруты, он ломается.

В итоге я использовал какой-то код, похожий на принятый ответ возможного дубликата, поскольку это казалось единственным способом обеспечить надежную работу jQuery.

$(document).ready(() => {
   $("#parentDiv").on("show.bs.collapse", (e) => {
     if (e.target.id == "childDiv") {
       //enter code here
     }
   })
});

Answer 1

Чтобы предотвратить выполнение родительского прослушивателя при щелчке дочернего элемента, просто добавьте event.stopPropagation, чтобы предотвратить всплывание события.

// this fires when I click parent button, 
  
  $("#parentDiv").on("show.bs.collapse", () => {
      console.log("parent");
    });

  // this fires on click of child button
  $("#childDiv").on("show.bs.collapse", (e) => {
        //prevent event bubbling up to parent listener
  		e.stopPropagation();
      console.log("child");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>


<button data-toggle="collapse" data-target="#parentDiv" aria-controls="parentDiv"
        aria-expanded="false" aria-label="Toggle parent">Show parent
</button>

<div class="collapse" id="parentDiv">
  <p>This is the parent</p>

  <button data-toggle="collapse" data-target="#childDiv" aria-controls="childDiv" 
          aria-expanded="false" aria-label="Toggle child">Show child
  </button>

  <div class="collapse" id="childDiv">
    <p>This is the child</p>
  </div>
</div>