How to use click event on bootstrap modal

Question

I generate many bootstrap modals with a php script, and I'd like to edit some input of it when I click button "save changes". ModalIDs generated are something like "ModalID0000". But nothing happens with my script when i click on "save changes".

        <input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
        
        <!-- Modal -->
        <div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog" aria-labelledby="Identifiants" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                  </div>
                  <div class="modal-body">
                    <!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
                    <?php if ($flagLogin == true){ ?>
                    <input type="text" value="<?php echo $user; ?>"/>
                    <input type="password" value="<?php echo $pwd; ?>"/>
                    <?php } else { ?>
                    <input class="user_login" type="text" value="user"/>
                    <input class="user_password" type="password" value="xxxxxxxxx"/>
                    <?php } ?>
                  </div>
                  <div class="modal-footer">
                <button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-warning z-depth-0 save" >Save changes</button>
              </div>
            </div>
          </div>
        </div> 

    $("modal.save").click(function(){ 
            alert('save');
            //edit user_login and user_password values here  
    }); 

EDIT : 1st mistake found with modal element selector instead of class, but still no alert

    $(".modal.save").click(function(){ 
            alert('save');
    }); 

Answer 1

Save button is the child element of .modal selector.

So $("modal.save") should be replaced to $(".modal .save") .

Or that button belongs to .modal-footer so you can put as follows.

$(".modal-footer .save")

 $(".modal .save").click(function () { alert('save'); //edit user_login and user_password values here });

 <input role="button" data-target="#modalID<?php echo $post->Clone;?>" /> <!-- Modal --> <div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog" aria-labelledby="Identifiants" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- mdp et user récupérés dans le champ commentaire, sinon standard --> <?php if ($flagLogin == true){ ?> <input type="text" value="<?php echo $user; ?>" /> <input type="password" value="<?php echo $pwd; ?>" /> <?php } else { ?> <input class="user_login" type="text" value="user" /> <input class="user_password" type="password" value="xxxxxxxxx" /> <?php } ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning z-depth-0 save">Save changes</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>