为什么我可以't打开BootStrap模式，同时执行jQuery回调函数

Why I can't open a BootStrap modal performing also a jQuery callback function?

本文关键字：执行 jQuery 函数 回调 模式 BootStrap 我可以 打开 为什么      更新时间：2023-09-26

我是JQuery和BootStrap的新手，我有以下问题。

我有这个BootStrap模式：

<div id="variazioneAnticipoModal" class="modal fade">
  <div class="modal-dialog">
    <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>
        <h3 class="modal-title" style="color: #3b5a76;">Variazione Anticipo</h3>
      </div>
      <div id="modal-body" class="modal-body">       
        <div id="inserimentoVariazioneAnticipo">
          <div class="row">
            <div class="col-md-5">
              <p style="line-height: 200%;">Inserire la variazione dell'anticipo: </p>
            </div>
            <div class="col-md-7">
              <input id="variazioneAnticipo" class="rightAlligned form-control" style="width:50%" type="number" step="0.01" min="0" />
            </div>
          </div>
          <div id="variazioneAnticpoInvalida" class="alert alert-danger" role="alert" style="display: none; margin-top: 3%;">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
                            Il valore inserito non &egrave; valido
          </div>
        </div>
        <!-- Hidden by default: -->
        <div id="confermaVariazioneAnticipo" style="display: none;">
          <h3>Confermare variazione anticipo ?</h3>
        </div>          
      </div>
      <div class="modal-footer">
        <button id="chiudiVariaAnticipoButton" type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
        <button id="variaAnticipoButton" type="button" class="btn btn-primary">Varia anticipo</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

然后，我有了这个JQuery脚本，它打开了模态，并设置了一个必须显示的div和一个在打开模态时必须隐藏的div：

$('#variazioneAnticipoModal').modal('show'); 
$("#inserimentoVariazioneAnticipo").show();
$("#confermaVariazioneAnticipo").hide();

这很好用。

问题是，我试图使用回调函数概念来重构这个简单的JQuery代码。

所以我试着做：

$('#variazioneAnticipoModal').on('show.bs.modal', function (e) {
  $("#inserimentoVariazioneAnticipo").show();
  $("#confermaVariazioneAnticipo").hide();  
});

但是它不能工作，并且没有显示模态。

我还试图在回调函数中只插入一条警告消息以进行调试，但仍然无法工作。警报弹出窗口不会显示，模式也不会打开。

为什么？我错过了什么？在这种情况下，是更好地使用回调概念，还是我可以使用第一个工作代码？与我的第一个工作示例和回调的使用有什么不同？

我认为您需要首先初始化模态。

尝试放置：$('#variazioneAnticipoModal').modal();在你的代码之前，像这样：

 $('#variazioneAnticipoModal').modal();
 $('#variazioneAnticipoModal').on('show.bs.modal', function (e) {
        $("#inserimentoVariazioneAnticipo").show();
        $("#confermaVariazioneAnticipo").hide();
    });

show.bs.modal在加载模型对话框时工作，shown.bs.mode在加载后可以做任何事情。后期渲染。但是，您需要首先初始化模态，这样它才会有这些事件。

相关文章：