Jquery 首次打开后引导模式不工作_Jquery_Twitter Bootstrap 3_Codeigniter 3

Jquery 首次打开后引导模式不工作

jquery twitter-bootstrap-3

Jquery 首次打开后引导模式不工作,jquery,twitter-bootstrap-3,codeigniter-3,Jquery,Twitter Bootstrap 3,Codeigniter 3,我有一个PHP5应用程序在CodeIgniter 3框架中运行我创建了一个模板，并将一个视图输入到模板中。该视图在文件中没有附加任何js；所有javascript都随模板一起附加视图本身具有添加和编辑按钮。我有一个空白的Bootstrap-3模式，另存为单独的视图。我已经为添加和编辑按钮的链接添加了数据属性，这些按钮有助于构建模式标题和内容。单击“添加”或“编辑”按钮时，模式将作为覆盖显示在列表页面上，模式内容实际上是带有传入参数的“编辑”视图的“添加”视图如果我单击“添加”或“编辑”，将

我有一个PHP5应用程序在CodeIgniter 3框架中运行

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

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

如果我单击“添加”或“编辑”，将弹出模式并正确显示内容…第一次。如果我关闭模态并在不刷新的情况下重试，我在控制台中会出现以下错误：uncaughttypeerror:“#myModal”。模态不是函数

我从头到尾观察了控制台，注意到错误也会在第一次单击时触发，但不会阻止第一次打开模式

我以前遇到过这个错误，问题是我加载JQuery库两次，或者在引导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>


正如我在前面的评论中提到的，您的javascript中有一个错误：
('#myModal').modal('destroy');

您缺少（“#myModal”）之前的$
另外，你可能根本不想看到这条线，因为它会破坏你刚才创建的模式
该行中的错误是在第一次模态显示后抛出的，因此导致任何javascript（包括后续模态调用）失败，这就是为什么它只工作一次
<>你也可以考虑从你的模态HTML中删除<代码>淡出>代码>类。一旦你克服了这些初始问题，它可能会也可能不会导致你的模态出现问题。你能发布你的js来显示和隐藏模态等吗？这几乎总是因为你的模态HTML格式不好或者模态库应该处理的额外类，但是在模态显示之前，不应该在那里。但我不能确定，因为你发布了一堆与问题完全无关的代码。请发布组成模态的html、打开模态的链接以及启动或填充模态的任何相关javascript。此外，错误听起来可能是您的jquery错了…#myModal.modal。。。你的jquery应该看起来像$（'#myModal'）。modal（'show'）@erikrunia：谢谢，我做到了。接得好。当我试图解决这个问题时，我把它放了进去。删除这条线不会改变任何事情；我仍然得到相同的错误，并且模态仍然只打开一次。这很难相信（在删除它之后，您会得到相同的错误）。这是唯一会抛出你描述的错误的一行。再次单击链接之前，请确保保存并完全刷新网页。此外，可能不会导致任何问题，但在使用jquerys.data（..）函数时，请确保属性名称使用hypens而不是下划线作为其正确形式。然后在调用.data时，使用驼峰大小写版本的hypen变量名。因此：数据btn文本变为.data（'btnText'），感谢您在使用命名约定时提供正确约定的提示。我确认，当我删除最后一行时，没有任何变化；我仍然得到完全相同的错误。文件已保存，我再次测试，昨晚关闭了计算机，今天重新启动。然后，您的.datatable javascript或代码库中的其他地方出现了javascript错误，因为我用您的确切代码创建了一个JSFIDLE，减去datatable行，每次单击按钮时，模式都会弹出。
<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>

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