Bootstrap 5 崩潰與復選框，stopPropagation() 不工作

Question

我以為我在這里找到了我的問題的答案，但它對我不起作用： prevent bootstrap collapse from collapsing

我的內容是動態創建的，所以我使用了 $(document).on 語法，所以我不確定這是否是問題所在？ 或者其他與事件傳播方式有關的東西？

我也試過在按鈕外輸入，但它破壞了布局。 我應該這樣做並嘗試解決布局問題嗎？ 我寧願讓它看起來不錯並弄清楚如何停止傳播......

這是我的js代碼：

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

和呈現的 HTML

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

Answer 1

<div id="fileDownloadDiv">
    <div class="accordion accordion--custom" id="accordionExample">
        <div class="accordion-item">
            <div class="accordion-header" id="heading6">
                 <input type="checkbox" class="form-check-input program_files_checkbox" id="program6" value="6" checked="">
                 <a class="accordion-button" 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;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
            <div class="form-group form-check pl-4">
                  <input type="checkbox" class="form-check-input file_checkbox type_package program6" id="package243" data-program="6" value="program_data/6/packages/1646756076.zip" checked="">
                  <label class="form-check-label" for="package243">1646756076.zip</label>
            </div>
            <div class="form-group form-check pl-4">
                  <input type="checkbox" class="form-check-input file_checkbox type_script program6" id="scriptundefined" data-program="6" value="program_data/6/scripts/MEER_munger.py" checked="">
                  <label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
            </div>
        </div>                                                  
    </div>
</div>