如何多次使用引导模式？

Question

How can I use a dynamically generated Bootstrap-Modal multiple times with a default state?

My problem is: When I click on the button to open the modal, you can see the default values 1 und 2. Now I enter '3' in the upper input field, close the modal with "Save changes" or "Close" and press the button again. Now, there should be 1 and 2 in the input fields but it's still 3 and 2.

I tried to fix it in jquery (as you can see in the code), but it did not work:

  $('#openModal1').on('click', function(){ let x = ` <form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal-dialogLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- actual form markup --> <div class="form-group"> <label for="field1">Example label</label> <input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input"> </div> <div class="form-group"> <label for="field2">Another label</label> <input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input"> </div> <!-- /actual form markup --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button> </div> </div> </div> </form> `; $("#modal-area").append(x); $('#modal-form').modal({}); }); $('#modal-form').on('hidden.bs.modal', function (event) { $("#modal-area").empty(); }); 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> <div id="modal-area"></div> <button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form"> Open modal form </button> 

How can I solve this problem?

Answer 1

You need to use html() not append() see below

  $('#openModal1').on('click', function(){ let x = ` <form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal-dialogLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- actual form markup --> <div class="form-group"> <label for="field1">Example label</label> <input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input"> </div> <div class="form-group"> <label for="field2">Another label</label> <input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input"> </div> <!-- /actual form markup --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button> </div> </div> </div> </form> `; $("#modal-area").html(x); $('#modal-form').modal({}); }); $('#modal-form').on('hidden.bs.modal', function (event) { $("#modal-area").empty(); }); 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> <div id="modal-area"></div> <button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form"> Open modal form </button>