x-editable v1.5.1 Uncaught TypeError: $(...).editable is not a function答案

【问题标题】：x-editable v1.5.1 Uncaught TypeError: $(...).editable is not a functionx-editable v1.5.1 Uncaught TypeError: $(...).editable is not a function
【发布时间】：2017-05-08 11:04:25
【问题描述】：

我想使用 bootstrap 和x-editable 实现内联编辑，但是无论使用哪个版本的 jquery/bootstrap/x-editable，我都会出现以下错误

未捕获的类型错误：$(...).editable 不是函数

调用时：

$('#field_name').editable();

和

未捕获的类型错误：无法读取未定义的属性“默认值”

调用时：

$.fn.editable.defaults.mode ='inline';

就像库本身没有初始化一样：

如何包含文件

   <script src="path/jquery.min.js"></script>           /v: 3.2.1 and 1.9.1
   <script src="path/tether.min.js"></script>         
   <script src="path/bootstrap.min.js"></script>        /v:4-alpha
   <script src="path/jquery.ui.min.js"></script>           /v: 1.12.1
   <script src="path/bootstrap3-editable.js"></script>   /v: 1.5.1
   <script src="path/customFile.js"></script>

如何调用editable

  <script type="text/javascript"> 
   (function () {
         customFile.init();
   })();
  </script>

customFile.js

  var customFile = (function(){
      var scope = {
           init : function(){
              $('#field_name').editable();
           }
       };

      return {
           init : scope.init
      };

  })(window, undefined)

HTML 代码

  <a href="#" id="field_name" data-type="text" (...)>Some text</a>

我刚刚在 bootstrap-editable.js 供应商中放置了一些 console.log 并启动，因此包含该库但不知何故函数 $.fn.editable 不存在。 非常感谢您的建议

PS 该应用程序基于 Syfony 3.x，我使用 Twig 模板系统进行模板继承。 bower 用于供应商依赖项

【问题讨论】：

标签： jquery twitter-bootstrap x-editable

【解决方案1】：

正如我提到的，twig 用于创建主要布局站点。结构是这样的：

  <head>
    {% block javascripts %}
        <script type="text" src="path/bootsrtap3-editable.js"></script>
    {% endblock %}
  </head>

  <body>
    {% page_content %}
       some content here
    {% endblock %}

    {% block javascripts_inline %}
       <script type="text/javascript"> 
          (function () {
             customFile.init();
          })();
       </script>
    {% endblock %} 
 </body>

解决方案是将库包含移动到 javascripts_inline 块

  <head>
    {% block javascripts %}

    {% endblock %}
  </head>

  <body>
    {% page_content %}
       some content here
    {% endblock %}

    {% block javascripts_inline %}
       <script type="text" src="path/bootsrtap3-editable.js"></script>
       <script type="text/javascript"> 
          (function () {
             customFile.init();
          })();
       </script>
    {% endblock %} 
 </body>

【讨论】：