为什么我无法打开同时执行 jQuery 回调函数的 BootStrap 模式？

Question

我是 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();  
});

但是它不能工作，模态框也没有显示。

我也试过在回调函数中只插入一条警告信息来调试，但还是不行。未显示警报弹出窗口且未打开模式。

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

Answer 1

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

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

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

    });

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

为什么我无法打开同时执行 jQuery 回调函数的 BootStrap 模式？

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

javascript

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3