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

Question

我有一个带有登录按钮的 bootstrap 4 模态表单，当我打开模态并按 Enter 键然后 loginVelidation() 调用时，它工作正常，但是当我隐藏 bootstrap 模态时，此函数 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>