Question

我是bootstrap和jquery的初学者，当我尝试使用clockpicker包进行引导时，我遇到了这个错误。

未捕获的TypeError：$（...）。clockpicker不是函数。

<html >
<head>
    <!-- Clockpicker and minified CSS -->
    <link rel="stylesheet" href="clockpicker-gh-pages/dist/bootstrap-clockpicker.min.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Time Slot</title>
</head>
<body>

    <div class="col-xs-12" style="height:100px;"></div>
    <div class="container-fluid" >
            <form role="form" name="frm"  action ="timeslot" method="post" 
            onSubmit="return valid2()">

            <div class="form-group">
                    <label for="name" >Slot Name</label>
                    <input type="text" name="slotname" class="form-control" placeholder="Time Slot name" >
             </div>
             <div class="form-group">
                    <label for="name" >Time Slot</label>
                    <input type="text" name="slotname" class="form-control" placeholder="Time Slot name" >
             </div>
             <label for="name" >Time</label>
            <div class="input-group clockpicker">
                <input type="text" class="form-control" value="09:30">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>


            <div class="col-xs-12" style="height:30px;"></div>
            <div class="form-group">
                    <button type="submit" class="btn btn-info" name="submit">SUBMIT</button>
            </div>
        </div>
            </form>

            <script type="text/javascript">
            $('.clockpicker').clockpicker()
                .find('input').change(function(){
                    // TODO: time changed
                    console.log(this.value);
                });
            $('#demo-input').clockpicker({
                autoclose: true
            });

            if (something) {
                // Manual operations (after clockpicker is initialized).
                $('#demo-input').clockpicker('show') // Or hide, remove ...
                        .clockpicker('toggleView', 'minutes');
            }
            </script>


</body>
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="clockpicker-gh-pages/assets/js/bootstrap.min.js"></script>
    <script src="clockpicker-gh-pages/assets/js/highlight.min.js"></script>
    <script src="clockpicker-gh-pages/dist/jquery-clockpicker.min.js"></script>

</html>

Answer 1

如果您查看发布的代码，您会发现在加载clockpicker之前，您将尝试运行 clockpicker 。

解决此问题的最简单方法是使用jQuery document ready函数，这会导致您的脚本在尝试运行之前等待整个页面加载：

// This line tells jQuery to wait until the whole page is loaded before running the code inside.
// This will solve your current problem, as well as many other potential problems.
jQuery(function($) {
        $('.clockpicker').clockpicker()
            .find('input').change(function(){
                // TODO: time changed
                console.log(this.value);
            });
        $('#demo-input').clockpicker({
            autoclose: true
        });

        if (something) {
            // Manual operations (after clockpicker is initialized).
            $('#demo-input').clockpicker('show') // Or hide, remove ...
                    .clockpicker('toggleView', 'minutes');
        }
// The line below "closes" the document ready function
});

引导带时钟选择器（clockpicker不是一个功能）

1 个答案: