Question

我有一个带登录按钮的bootstrap 4模态形式，当我打开模态并按Enter时，loginVelidation()称它工作正常，但是当我隐藏bootstrap modal时，此功能loginVelidation()起作用。但是当模态为隐藏时，我不希望使用此功能loginVelidation()。

我该怎么做？

这是我的代码：-

$(function(){

    $('#loginModal').on('show.bs.modal', function(){
        $(document).on('keypress', function(e){
            if(e.which == 13){
                loginVelidation();
            }
        });
    });

    $('#loginModal').on('hidden.bs.modal', function(e){
    });
});


function loginVelidation(){
    alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

答案将不胜感激！

Answer 1

您可以像这样检查jQuery模态是否可见。请记住，“ on.shown.modal”是触发的事件。并且不检查模态的当前状态。

$(function(){
        $(document).on('keypress', function(e){
            if(e.which == 13){
              if ($('#loginModal').is(':visible')) {
                loginVelidation();
              }
            }
});
});



function loginVelidation(){
    alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

Answer 2

您正在将事件侦听器添加到show.bs.modal事件中。在keypress事件内部，检查模式是否为visible并使用===而不是双==

$(function() {
  $(document).on('keypress', function(e) {
    if ($('#loginModal').is(':visible')) {
      if (e.which === 13) {
        loginVelidation();
      }
    }
  });
})

function loginVelidation() {
  alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

<!-- The Modal -->
<div class="modal" id="loginModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
      </div>

    </div>
  </div>
</div>

Answer 3

首先检查模式是隐藏的还是可见的，然后进行验证

$(function(){

    $('#loginModal').on('show.bs.modal', function(){
        $(document).on('keypress', function(e){
            if(e.which == 13 && ($("#loginModal").data('bs.modal') || {})._isShown    ){
                loginVelidation();
            }
        });
    });

    $('#loginModal').on('hidden.bs.modal', function(e){
    });
});


function loginVelidation(){
    alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

我希望这会对您有所帮助。

如果引导模态被隐藏，如何在jquery中使函数为false？

3 个答案: