使用 JQuery 未打开 Bootstrap 模式窗口答案

【问题标题】：A Bootstrap modal window not open using JQuery使用 JQuery 未打开 Bootstrap 模式窗口
【发布时间】：2019-01-05 01:54:16
【问题描述】：

我在 CodeIgniter 视图中有几个模式窗口，当我尝试使用 JQuery 打开它们时看不到它们。我用 .modal ('toggle') 和 .modal ('show') 尝试过，但没有成功。如果我使用带有 data-toogle 和 data-target 的按钮，它可以正常工作。从我使用 Chrome 代码检查器看到的内容以及我在页面上看到的一些细节来看，当我单击打开模式窗口时，页面的行为就像它已经打开但没有显示给我一样。我看到在 body 标记中出现了 modal-open 类，但没有出现窗口。

我把部分代码放在这里。

模态窗口之一：

其中一个模态窗口的代码

    <!-- MODAL EDIT -->
    <form>
        <div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar Cliente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <input type="hidden" name="cliente_id_edit" id="cliente_id_edit">
              <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Código</label>
                        <div class="col-md-10">
                          <input type="text" name="codigo_cliente_edit" id="codigo_cliente_edit" class="form-control" placeholder="Código do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Nome</label>
                        <div class="col-md-10">
                          <input type="text" name="nome_cliente_edit" id="nome_cliente_edit" class="form-control" placeholder="Nome do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">CPF</label>
                        <div class="col-md-10">
                          <input type="text" name="cpf_cliente_edit" id="cpf_cliente_edit" class="form-control" placeholder="CPF do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Sexo</label>
                        <div class="col-md-10">
                            <div class="form-check-inline form-check">
                                <label for="sexo1" class="form-check-label ">
                                    <input type="radio" id="sexo1_edit" name="sexo_cliente_edit" value="F" class="form-check-input">F
                                </label>&nbsp;&nbsp;
                                <label for="sexo2" class="form-check-label ">
                                    <input type="radio" id="sexo2_edit" name="sexo_cliente_edit" value="M" class="form-check-input">M
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">E-mail</label>
                        <div class="col-md-10">
                          <input type="text" name="email_cliente_edit" id="email_cliente_edit" class="form-control" placeholder="E-mail do cliente">
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="button" type="submit" id="btn_update" class="btn btn-primary">Enviar</button>
              </div>
            </div>
          </div>
        </div>
        </form>
    <!--END MODAL EDIT-->

打开模态的jQuery代码

    $('#show_data').on('click','.item_edit',function(){

        $('#Modal_Edit').modal('show');

    });

调用的代码：

<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-codigo_cliente="001" data-nome_cliente="Luis" data-cpf_cliente="123456789" data-sexo_cliente="M" data-email_cliente="mail@mail.com" data-cliente_id="1">Editar</a>

我测试了该事件是否有效，是的。当你点击编辑器时

【问题讨论】：

如果你在 DOM 中没有多个具有相同 ID 的元素，是吗？
没有机会。我查过了。

标签： jquery bootstrap-4 bootstrap-modal

【解决方案1】：

我认为是<form> 标签，请尝试将其移到.modal-body 内。然后做

$('#show_data').click(function() {
    $('#Modal_Edit').modal('show');
});

提交按钮：

$('#btn_update').click(function() {
    $('form').submit();
});

【讨论】：

【解决方案2】：

你有没有试过这个 Bootstrap $('#myModal').modal('show') is not working

这些是常见的错误，不妨检查一下。

【讨论】：