CODEWITHSUNDEEP
jquerybootstrap-4bootstrap-modal
ioffChanatsanan
ioffChanatsanan

Reputation: 49

Modal button not working with event click?

then click .btn_confirmdel button my function not working. what should I do ?

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

Html Code:

    <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>

`

Upvotes: 1

Views: 1213

Answers (4)

Hirak Sheth
Hirak Sheth

Reputation: 359

If your modal is loading dynamically then you can below code. 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>

Upvotes: 1

Yasin Patel
Yasin Patel

Reputation: 5731

Try this:

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

Upvotes: 1

Maverick Fabroa
Maverick Fabroa

Reputation: 1173

It is recommended to use an id for events instead of a class:

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

Javascript:

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

Upvotes: 0

Mayuri Pansuriya
Mayuri Pansuriya

Reputation: 954

try to wrap up inside document ready

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

Upvotes: 1

Related Questions