undefined不是$附近的函数

Question

请告诉我我的代码有什么问题。

在jsfiddle上遵循以下示例：https://jsfiddle.net/Mottie/j8hc5yLm/ 单击输入字段时，我正在网站上实现虚拟键盘。

这是我在html文件末尾的登录页面上写的

<script>
$(document).ready(function() {

  $('#keyboard').keyboard({
    visible: function(e, keyboard) {
      initTypeAhead(keyboard);
    },
    change: function(e, keyboard){
      // trigger "input" required for typeahead to recognize a change
      e.type = 'input';
      keyboard.$preview.trigger(e);
    }
  })
  // activate the typing extension
  .addTyping({
    showTyping: true,
    delay: 250
  });

});
</script>

在我写的文件的开头部分

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

在该页面中，我有一个div，我想像示例中那样调用键盘

<div id="wrap">
  <input id="keyboard" type="text" />
</div>

加载页面时出现此错误：

TypeError: undefined is not a function (near '...$('#keyboard').keyboard...')

但是我不知道问题出在哪里。