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>

Bootstrap 5 崩溃与复选框，stopPropagation() 不工作

Bootstrap 5 collapse with Checkbox, stopPropagation() not working

javascript

jquery

twitter-bootstrap