Bootstrap: allow opening a modal without activating collapse on parent-CodePudding

Simple situation here: I have a Bootstrap 4 table with rows that I want to be clickable to expand additional, hidden rows. So the entire tr has data-toggle="collapse". However, inside that TR are some buttons that I want to open modals without activating the collapse. I can't seem the get that working, I've tried:

      $('tr[data-toggle="collapse"]').click( function(e) {
        if (e.target.tagName != "TD") { 
          e.target.click();
          e.stopPropagation();
        }
      });

But this just prevents modals from showing up. I have also tried to capture clicks on the buttons, check the targets and only call .modal('show') if the targets are buttons, stopping propagation otherwise, but this causes the modals to show and then close immediately.

CodePudding user response：

Don't rely on the attributes data-bs-something but rather write your own logic for opening the modal. Then cancel the event on click using ev.stopPropagation()

$(".open-modal").on("click", function(ev) {
  $('#exampleModal').modal()

  // this line does it
  ev.stopPropagation();

})

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div  id="accordionExample">
  <div >
    <div  id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <h3 >
        Collapsible Group Item #1


        <button >open modal</button>
      </h3>
    </div>

    <div id="collapseOne"  aria-labelledby="headingOne" data-parent="#accordionExample">
      <div >
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird

      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        ...
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>