Bootstrap 5 collapse with Checkbox, stopPropagation() not working-CodePudding

I thought I had found the answer to my question here, but it's not working for me: prevent bootstrap collapse from collapsing

My content is dynamically created, so I used the $(document).on syntax, so I'm not sure if that's the issue? Or something else with how the event propagates?

I also tried taking the input outside of the button, but it breaks the layout. Should I do that and just try to fix the layout issue? I'd rather have it looking good and figure out how to stop the propagation...

Here is my js code:

//handle the file accordion checkbox click event
$(document).on('click', '.program_checkbox', function(e) {
    e.stopPropagation(); 
});

And the rendered HTML

<div id="fileDownloadDiv">
    <div  id="accordionExample">
        <div >
            <h2  id="heading6"><button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6"><input type="checkbox"  value="Maine Ecological Reserves Program" checked="">Maine Ecological Reserves Program</button></h2>
        </div>
        <div id="collapse6"  aria-labelledby="heading6" data-bs-parent="#accordionExample">
            <div ><input type="checkbox"  id="package243" value="program_data/6/packages/1646756076.zip" checked=""><label  for="package243">1646756076.zip</label></div>
            <div ><input type="checkbox"  id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked=""><label  for="scriptundefined">MEER_munger.py</label></div>
        </div>
        <div >
            <h2  id="heading9"><button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9"><input type="checkbox"  value="Vermont State Lands Continuous Forest Inventory">Vermont State Lands Continuous Forest Inventory</button></h2>
        </div>
        <div id="collapse9"  aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project</div>
    </div>
</div>

CodePudding user response：

<div id="fileDownloadDiv">
    <div  id="accordionExample">
        <div >
            <div  id="heading6">
                 <input type="checkbox"  id="program6" value="6" checked="">
                 <a  type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
            </div>
        </div>
        <div id="collapse6" style="margin-left:24px;"  aria-labelledby="heading6" data-bs-parent="#accordionExample">
            <div >
                  <input type="checkbox"  id="package243" data-program="6" value="program_data/6/packages/1646756076.zip" checked="">
                  <label  for="package243">1646756076.zip</label>
            </div>
            <div >
                  <input type="checkbox"  id="scriptundefined" data-program="6" value="program_data/6/scripts/MEER_munger.py" checked="">
                  <label  for="scriptundefined">MEER_munger.py</label>
            </div>
        </div>                                                  
    </div>
</div>