问引导带时钟选择器(时钟拾取器不是一种功能)
EN

Stack Overflow用户

提问于 2016-02-27 23:31:50

回答 1查看 7.2K关注 0票数 1

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

Uncaught：$(.).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>

jquery

html

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-28 00:03:27

如果您查看您发布的代码，您将看到您正在尝试在加载之前运行时钟选择器。

解决此问题的最简单方法是使用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
});

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35676805

复制

相似问题

问引导带时钟选择器(时钟拾取器不是一种功能)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导带时钟选择器(时钟拾取器不是一种功能)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导带时钟选择器(时钟拾取器不是一种功能)
EN