title: Open bootstrap modal from other modal
body: <p>I use bootstrap 4 and AJAX in my project.</p>
  
  <p>In page with 2 models. Inside first modal <code>(id='#modal-lg')</code> I have button which must to open second modal <code>(id='#modal')</code>. When I click that button it didnt open second modal. It just close first modal. How to fix this problem? Where I did mistake?</p>
  
  <p><strong>template.html:</strong></p>
  
  <pre><code>{# FIRST MODAL #}
  &lt;div class="modal fade" id="modal-lg"&gt;
     &lt;div class="modal-dialog modal-lg"&gt;
        &lt;div class="modal-content"&gt;
           &lt;div class="modal-body"&gt;
              &lt;button id="requirement-add-button" data-url="{% url 'project:requirement_add' %}"&gt;
                 {% trans 'Add New Requirement' %}
              &lt;/button&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  {# FIRST MODAL #}
  
  {# SECOND MODAL #}
  &lt;div class="modal fade" id="modal"&gt;
     &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  {# SECOND MODAL #}
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>$(function () {
      var loadForm = function () {
          var btn = $(this);
          $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                  $("#modal").modal("show");
              },
              success: function (data) {
                  $("#modal .modal-content").html(data.html_requirement_form);
              }
          });
      };
  
      var saveForm = function () {
          var form = $(this);
          $.ajax({
              url: form.attr("action"),
              data: form.serialize(),
              type: form.attr("method"),
              dataType: 'json',
              success: function (data) {
                  if (data.form_is_valid) {
                      $("#requirement-table tbody").html(data.html_requirement);
                      $("#modal").modal("hide");
                  }
                  else {
                      $("#modal .modal-content").html(data.html_requirement_form);
                  }
              }
          });
          return false;
      };
  
      // CREATE
      $("#requirement-add-button").click(loadForm);
      $("#modal").on("submit", ".js-requirement-add-form", saveForm);
  });
  </code></pre>