首次打开后引导模式不起作用答案

【问题标题】：Bootstrap Modal Not Working After First Open首次打开后引导模式不起作用
【发布时间】：2018-08-01 18:12:14
【问题描述】：

我有一个在 CodeIgniter 3 框架中运行的 PHP 5 应用程序。

我创建了一个模板，并将一个视图输入到模板中。视图文件中没有附加任何 js；所有的 javascript 都附在模板中。

视图本身有一个添加和编辑按钮。我有一个单独的空白 Bootstrap-3 模态保存为单独的视图。我已经为添加和编辑按钮的链接添加了数据属性，这些按钮有助于构建模态标题和内容。当点击添加或编辑按钮时，模态在列表页面上作为覆盖弹出，模态内容实际上是传入参数的编辑视图的添加视图。

如果我单击添加或编辑，则会弹出模式并正确显示内容...第一次。如果我关闭模态并再次尝试而不刷新，我会在控制台中收到以下错误：Uncaught TypeError: "#myModal".modal is not a function。

我从头到尾观察了控制台，发现第一次点击时也会触发错误，但不会阻止模态框第一次打开。

我以前遇到过这个错误，问题是我两次加载 JQuery 库，或者在 Bootstrap js 之后而不是之前加载它。我已经确认这些情况都不适用于这里。

控制器，列表视图作为模板主体输入到模板中：

function index()
{
    $params['limit'] = RECORDS_PER_PAGE; 
    $params['offset'] = ($this->input->get('per_page')) ? $this->input->get('per_page') : 0;

    $config = $this->config->item('pagination');
    $config['base_url'] = site_url('client/index?');
    $config['total_rows'] = $this->Client_model->get_all_clients_count();
    $this->pagination->initialize($config);


    $data['clients'] = $this->Client_model->get_all_clients($params);

    //$data['_view'] = 'client/index';
    //$this->load->view('layouts/main',$data);
    $this->template->load('default', 'client/index', $data);
}

这是模板：

<!DOCTYPE html>
<html>
    <head>
    <!-- Bootstrap 3 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Datatables CSS -->
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">


    <meta charset="UTF-8">
    <title><?php echo $title; ?></title>
</head>

<body>

    <h1><?php echo $header; ?></h1>

    <div class="wrapper">

        <?php echo $body; ?>

    </div>


    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Bootstrap 3 JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Datatables JS-->
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script src="<?php echo site_url('assets/js/clients.js'); ?>"></script>
</body>

clients.js 文件中的 Javscsript：

    $(document).ready(function() {
        $('#clients_list').DataTable();

        $('.ls-modal').on('click', function(e){
            e.preventDefault();

            var title = $(this).data('title');
            var btn_txt = $(this).data('btn_txt');
            var mode = $(this).data('mode');

            $('#modal_title').html(title);
            $("#client-sbmt").html(btn_txt);
            $('#client_form_mode').val(mode);

            $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));


        });


        $('#client-sbmt').on('click', function(e){

            var mode = $('#client_form_mode').val();

            if(mode == 'add')
                $("#add_modal_form").submit();

            if(mode == 'edit')
                $("#edit_modal_form").submit()
            }); 
        } );


The modal:
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title title"><span id="modal_title">Edit Client</span></h4>
                </div>

                <div class="modal-body"></div>



                <div class="modal-footer">
                    <input type="text" id="client_form_mode" name="client_form_mode"/>
                    <button type="button" class="btn btn-success" id="client-sbmt" name="" data-submit="modal">Save</button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>

        </div>
    </div>

示例按钮：

<a href="<?php echo site_url('client/add'); ?>" class="btn btn-success ls-modal" data-title="Add New Client" data-btn_txt="Add" data-mode="add">Add</a>

知道这里发生了什么吗？

【问题讨论】：

你能发布你的显示和隐藏模式等的js吗？
这几乎总是因为您的模态 HTML 格式错误或其中包含模态库应该处理的额外类，但在显示模态之前不应该从您那里获得。但我不能确定，因为您发布了一堆与问题完全无关的代码。请发布构成模态的 html、打开模态的链接以及启动或填充模态的任何相关 javascript。
此外，错误听起来可能是您的 jquery 错误..."#myModal".modal ...您的 jquery 应该类似于 $('#myModal').modal('show')
@erikrunia：谢谢，我做到了。

标签： jquery twitter-bootstrap-3 codeigniter-3

【解决方案1】：

正如我之前的评论中提到的，您的 javascript 中有一个错误：

('#myModal').modal('destroy');

您在 ('#myModal') 之前缺少 $

另外，你可能根本不想要那条线，因为它会破坏你刚刚创建的模式。

该行中的错误在您的模态首次显示后被抛出，从而使任何 javascript（包括后续的模态调用）失败，这就是它只工作一次的原因。

您可能还需要考虑从模态 html 中删除 fade 类。一旦你克服了这些最初的问题，它可能会也可能不会导致你的模态出现问题。

【讨论】：

好收获。当我试图解决问题时，我实际上把它放在那里。删除该行不会改变任何东西；我仍然遇到同样的错误，而且模式仍然只打开一次。
这很难相信（删除它后你会得到同样的错误）。那是唯一会引发您描述的错误的行。请确保在再次单击链接之前保存并完全刷新网页。
另外，可能不会导致任何问题，但是在使用 jquerys .data(..) 函数时，请确保属性名称使用连字符而不是下划线，作为其正确形式。然后在调用 .data 时使用 hypen 变量名称的驼峰式版本。所以：data-btn-text 变成 .data('btnText')
感谢您在使用命名约定时提供正确约定的提示。我确认当我删除最后一行时，没有任何变化；我仍然得到完全相同的错误。该文件已保存，我再次测试，昨晚关闭了我的计算机，今天重新启动。
那么你的 .datatable javascript 或代码库中的其他地方有一个 javascript 错误，因为我用你的确切代码创建了一个 jsfiddle，减去数据表行，并且每次都会弹出模式我点击按钮。 jsfiddle.net/Lgs9wz72/3