Question

序言：我知道这个问题已经过时了，但在我的情况下，并不是因为加载了两次Jquery

我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
        <script src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
        <title>Maiscai</title>
    </head>
    <body>

        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">Maiscai v0.03</a>
            </div>
        </nav>


        <div class="container-fluid">

            <div class="row" id="progress_bar_row">
                <div clas="col-sm-12">
                    <div class="progress col">
                        <div class="progress-bar progress-bar-info" 
                                role="progressbar" 
                                style="width: 0%">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" id="result_row">
                <div class="col-sm-12" id="result_cell"></div>
            </div>

            <div class="row" id="log_row" style="border: 1px solid gray;">
                <div class="col-sm-12">
                    <div id="log" style="overflow: auto;"></div>
                </div>
            </div>

        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <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>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>

                    <div class="modal-body">
                        ... this is the body
                    </div>

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

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/cache.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

在js/index.js文件中，我已定义了此

 // Application bootstapper
initialize: function() {
    document.addEventListener(
        'deviceready', 
        app.onDeviceReady, 
        false
    );
 }

onDeviceReady: function() {
    .... 

    // Modal triggers
    $(document).on('click','.list-group-item', function (){
        $('#myModal').modal("show");
    });

    ....
},

请注意，实际上我将事件绑定到文档，因为在运行时正在创建.list-group-item个元素。

问题在于：当我点击其中一项时，我收到此错误

I/chromium( 6186): [INFO:CONSOLE(53)] "Uncaught TypeError: Object [object Object] has no 
method 'modal'", source: file:///android_asset/www/js/index.js (53)

我已经通过jQuery 1.11.3和最新的2.x试用了，但同样的问题。

Bootstrap版本为3.3.6

Answer 1

感谢@adeneo评论，我发现了问题：由于路径错误，根本没有包含bootstrap.min.js文件。

Cordova和Bootstrap：无法通过javascript打开模态

1 个答案: