为什么jquery click事件会多次触发?

时间:2019-06-30 15:47:33

标签: javascript jquery bootstrap-modal

我有一个单击按钮的单击事件。它启动引导程序模式。如果我只键入$('a.login')。click',function(event){},则模式启动两次。如果我键入为$('a.login')。off('click')。on('click',function(event){},那么它可以正常工作。我想知道那是click事件将绑定到一个按钮自动?另外,我尝试了$('a.login')off();模式隐藏时,但是它使click事件处理程序消失了。

// jquery

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

      });
    });

$("#modalLoginForm").on("hidden.bs.modal", function () {
resetMyForm();
// $('a.login')off(); //make the click event not working after once
});

function resetMyForm(){
$('input').val('');
$('.error').empty();
     }

// html(索引)

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

// html(用户登录)

<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>  

我可以通过.off('click')。on('click')得到我想要的东西,但是我想知道为什么没有上述代码我的click事件将多次绑定。感谢您的帮助。

0 个答案:

没有答案