Bootstrap Colorpicker基本示例不起作用

Jay*_* D. 2 html css jquery twitter-bootstrap

我想为引导程序使用颜色选择器插件:https : //farbelous.io/bootstrap-colorpicker/index.html

它使用Bootstrap 4和Jquery

在尝试由开发人员在我的网站或JS Fiddle中发布的非常基本的代码示例时,颜色选择器无法正常工作(您应该在左侧看到一个可单击的正方形,并可以使用它来选择颜色)

JsFiddle

我究竟做错了什么 ?我以为可能是导入无效,所以我使用了CDN,但它没有任何改变

JsFiddle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="jumbotron">
      <h1>Bootstrap Colorpicker Demo</h1>
      <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $('#demo').colorpicker();

      // Example using an event, to change the color of the .jumbotron background:
      $('#demo').on('colorpickerChange', function(event) {
        $('.jumbotron').css('background-color', event.color.toString());
      });
    });
  </script>
</body>
Run Code Online (Sandbox Code Playgroud)

小智 5

这是您的代码的固定版本固定版本。

jQuery从CDN 加载时出现问题。

Chrome返回错误:

加载资源失败:服务器响应状态为404。

因此,我重新添加了CDN,一切正常。