首次打开后，Bootstrap模式不起作用

Question

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

我创建了一个模板，并且正在向该模板中添加视图。 该视图在文件中没有附加任何js； 所有javascript都随模板附上。

视图本身具有添加和编辑按钮。 我有一个空白的Bootstrap-3模式，另存为单独的视图。 我已将数据属性添加到“添加”和“编辑”按钮的链接中，以帮助构建模式标题和内容。 单击添加或编辑按钮时，模态作为列表页面上的叠加层弹出，模态内容实际上是带有输入参数的编辑视图的添加视图。

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

我从头到尾看了看控制台，并注意到错误也同样在第一次单击时触发，但是并不能阻止模式第一次打开。

我以前曾经遇到此错误，问题是我两次加载了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>

client.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>

知道这里发生了什么吗？

Answer 1

如我之前的评论中所述，您的JavaScript出现错误：

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

您在（'#myModal'）之前缺少$

另外，您可能根本不想要该行，因为它将破坏您刚刚创建的模态。

第一次显示模态后，该行中的错误将引发，从而使所有javascript（包括后续的模态调用）均失败，这就是为什么它只能运行一次的原因。

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

首次打开后，Bootstrap模式不起作用

问题描述

1 个解决方案

解决方案1
1 2018-08-02 19:03:00

首次打开后，Bootstrap模式不起作用

问题描述

1 个解决方案

解决方案1 1 2018-08-02 19:03:00

解决方案1
1 2018-08-02 19:03:00