模态按钮不适用于事件点击？答案

【问题标题】：Modal button not working with event click?模态按钮不适用于事件点击？
【发布时间】：2021-09-13 03:31:25
【问题描述】：

然后单击 .btn_confirmdel 按钮我的功能不起作用。我该怎么办？

$(".btn_confirmdel").click(function(){
               do something  
             });

HTML代码：

    <div class="modal fade" id="modal_confirmdelete" tabindex="-1" data-backdrop="static" 
                aria-labelledby="" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">System Information</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">      
                      Confirm to delete ? 
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn_confirmdel" id="">Yes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                      </div>
                    </div>
                  </div>
                </div>

【问题讨论】：

标签： jquery bootstrap-4 bootstrap-modal

【解决方案1】：

尝试将内部文件包装好

$(document).ready(function() {
   
   $(".btn_confirmdel").click(function(){ 
       //do something..
})
});

【讨论】：

【解决方案2】：

试试这个：

$(document).on("click",".btn_confirmdel",function(){
    // do something  
});

【讨论】：

【解决方案3】：

如果您的模态是动态加载的，那么您可以使用下面的代码。 IE。 $(document).on("click",".btn_confirmdel",function({});

<div class="modal fade" id="modal_confirmdelete" tabindex="-1" data-backdrop="static" 
                aria-labelledby="" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">System Information</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">      
                      Confirm to delete ? 
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn_confirmdel" id="">Yes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                      </div>
                    </div>
                  </div>
                </div>
                
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>
  $(document).on("click",".btn_confirmdel",function(){
      alert("btn clicked");
  });
</script>

【讨论】：

【解决方案4】：

建议对事件使用id 而不是类：

<button type="button" class="btn btn-primary btn_confirmdel" id="yesButton">Yes</button>

Javascript：

$("#yesButton").click(function() {
   // Do something
});

【讨论】：