javascript - BootStrap 模态不想关闭

Question

我正在使用 BootStrap我打开一个模态(模态在一个文件中)。

<div id="buy-function" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="gridSystemModalLabel">Achat </h4>
  </div>
<div class="modal-body">
    <div class="row">
      <div class="col-md-12">
      <form class="operation" role="form"  method="post" >
          <div class="form-group">
            <label for="quantite" class="col-sm-3 control-label">Quantitée : </label>
            <div class="col-sm-9">
              <input type="number" class="form-control" id="buy_live_quantite" name="quantite" value="10" >
            </div>
          </div>
          <div class="form-group">
            <label for="justif" class="col-sm-3 control-label">Justification : </label>
            <div class="col-sm-9">
              <textarea rows="3" class="form-control" id="justif" name="justif"></textarea>
            </div>
          </div> 
        </form> 
      </div>
    </div>
  </div>
<!--<div class="modal-footer"></div>

  <div id="live_invoice"></div>-->

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
      <button type="button" id="new_operation" class="btn btn-info">Acheter</button>
    </div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我用一个按钮打开一个模式。

    <div class="box-body">
                <button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#buy-function">Acheter</button>
                <button type="button" class="btn btn-block btn-warning btn-lg" data-toggle="modal" data-target="#sell-function">Vendre</button>
            </div>

但是，当我想关闭这个模态时(我用$('#buy-function').modal('hide'); ),

我的脚本:

<script>
$(document).ready(function () {
$("button#new_operation").click(function(){
    $.ajax({
        type: "POST",
        url: "/views/composants/new_operation.php", //process 
        data: $('form.operation').serialize(),
        success: function(msg){
            //alert(msg);
            $('#buy-function').modal('hide'); //hide popup  
        },
        error: function(){
            alert("failure");
        }
    });
});
});
</script>

没用。有什么想法吗？

Answer 1

检查你没有多次包含 jQuery。 Bootstrap 只会将其应用于第一个实例，当 jQuery 再次启动时，它将丢失。