关闭并重新打开时，引导模式会触发两次

Question

我有一个通过单击按钮调用的登录表单模式。并且模态是从带有ajax加载的外部文件调用的。但是，如果我关闭并重新打开模式。模态将启动两次并出现双模态背景类，我无法使用模态的功能。此外，我发现控制台消息出现： [DOM] Found 2 elements with non-unique id #loginForm: 。

当模态隐藏时，我尝试删除模态类。但是，它不起作用。

//jquery

$('a.login').click(function(event) {
  var url = "userlogin.php";
  $('.login-container').load(url,function(result){
      $('#modalLoginForm').modal({show:true});

        });

});

$("#modalLoginForm").on("hidden.bs.modal", function () {
  resetMyForm();
  $("#modalLoginForm").remove();
});

$('.loginbutton').click(function(event) {
// prevent the default submit
alert("haha");
event.preventDefault();
var form = $('#loginForm');
//alert(form);
$.ajax({
    url: "authentication.php", 
    type: "POST",
    // use the forms data
    data: form.serialize(),
    beforeSend: function() {    
        console.log( "Processing..." );
    },
    success: function( response ){
        // do sth with the response

        if(response == "OK") {
           // credentials verified
           // redirect

         location.reload();
        }else{
           // credentials incorrect
           // append errormessage to modal
          form.closest('.modal-body').append('<div class="error text- 
          danger">*'+response+'</div>');

          }
          },
    error: function( response ) {
       console.log(response);
    }

    });
    return false;
    });

//index.php

 <a href="" class="btn btn-secondary btn-rounded login" data- 
 toggle="modal">Login</a>
<div class="login-container"></div>

//userlogin.php

    <div class="modal fade" id="modalLoginForm" tabindex="-1" 
    role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
    <div class="modal-header bg-dark">
    <h4 class="col-sm-12 text-center text-white comp ">Sign in</h4>
    </div>
    <div class="modal-body mx-3">
  <div class="container">
  <div class="col-sm-12">
  <form id="loginForm"  method="post">
    <div class="md-form mb-5">
      <i class="fas fa-envelope prefix grey-text"></i>
      <label data-error="wrong" data-success="right" 
     for="defaultForm-email">Username:</label>
     <input type="text" name="username" class="form-control validate">
    </div>

    <div class="md-form mb-4">
      <i class="fas fa-lock prefix grey-text"></i>
       <label data-error="wrong" data-success="right" 
     for="defaultForm-pass">Password:</label>
     <input type="password" name="password" class="form-control validate">

      </div>
    </div>
    <form>
 </div>
  </div>
  <div class="modal-footer d-flex justify-content-center bg-primary">
    <button type="submit" class="btn btn-default text-white comp 
   loginbutton">Login</button>
   </div>
   </div>
   </div>
   </div>

   <script src="js/modal.js"></script>

当我关闭并重新打开时，我只想启动一个模式。感谢您的帮助。

Answer 1

尝试在 JS 中这样做，请使用“本机”选项来显示和隐藏模态，也就是模态。（'toggle'）

我的建议是，将除 modal-body 内的内容之外的所有 modal 移至 index.php，并将表单 (#loginForm) 留在 userlogin.php 中，然后为此更改您的 javascript：

$('a.login').click(function(event) {
  var url = "userlogin.php";
  $('#modalLoginForm').find('.modal-body').load(url)
  $('#modalLoginForm').modal('toggle');
});

$("#modalLoginForm").on("hidden.bs.modal", function () {
  resetMyForm();
});

有时，当模态显示重复或直接不工作时，这是因为 jQuery 或 Boostrap 导入的顺序错误或重复，但在您的情况下，我认为它只是错误的 javascript。

Answer 2

你调用了 modal 两次：data-toggle 和 modal 函数

在您的index.php 中尝试此代码：

<a href="" class="btn btn-secondary btn-rounded login">Login</a>
<div class="login-container"></div>

如果模态框在调用load之前已经加载到您的页面，请添加一些验证