javascript - 禁用模式中按钮的刷新

Question

这个问题已经有答案了:

How to prevent form from being submitted? (11 个回答)

已关闭 6 年前。

我的模式中的按钮有问题。在这个按钮上我放了一个 onclick ，但问题是当点击这个 mouse 时或enter ，页面刷新。

我希望可以点击ENTER我的页面执行我的功能 connexion()不刷新，因为里面做了AJAX代码。

这是我的模式代码:

<div class="modal fade" id="myModalLogin" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
     <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Se connecter</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-md-12">
                      <div id='wellconnexion' class="well">


                          <h1 id="TitleHistoriqueconnnexion" class="text-center">Se connecter</h1>
                          <br>

                           <h4 id="ContentHistorique1"></h4>

                          <div id='contentconnexion' class="contentconnexion">
                           <form >
                             <div class="form-group formmarginleft">
                                <input  name="user_login" id="user_login" type="text" placeholder="Identifiant" class="form-control">
                             </div>
                             <div class="form-group formmarginleft">
                                 <input name="user_password" id="user_password" type="password"  placeholder="Mot de passe" class="form-control">
                            </div>
                          <div class="row">
                             <div class="col-12-xs text-center">
                             <button id="validerlogin" onclick="connexion()" value="Se connecter" class="btn btn-primary">Se connecter</button>
                             <div data-dismiss="modal" class="btn btn-warning">Fermer</div>
                              </div>
                          </div>
                          </form>

                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>

Answer 1

在 onclick 函数中使用 PreventDefault 函数来阻止它重新加载页面。这应该可以解决问题。

https://api.jquery.com/event.preventdefault/