javascript - 如何多次使用 Bootstrap 模式？

Question

如何在默认状态下多次使用动态生成的 Bootstrap-Modal？

我的问题是:当我单击按钮打开模式时，您可以看到默认值 1 和 2。现在我在上部输入字段中输入“3”，使用“保存更改”或“关闭模式”关闭”并再次按下按钮。现在，输入字段中应该有 1 和 2，但它仍然是 3 和 2。

我尝试在 jquery 中修复它(正如您在代码中看到的那样)，但它不起作用:

    $('#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>

如何解决这个问题？

Answer 1

您需要使用html()而不是append()见下文

    $('#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>