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在模型对话框加载时工作，shows.bs.modal在加载后工作做任何事情。后渲染。但是你需要首先初始化模态，以便它有这些事件。

为什么我不能打开一个执行jQuery回调函数的BootStrap模式？

1 个答案: