X-editable $(...).editable 不是函數

Question

我有

 <tr>
     <td><i class="fa fa-folder-o" aria-hidden="true"></i>Site</td>
     <td>
         <a href="{{$url}}" id="username" data-type="string" data-pk="1" data-name="username" data-url="post.php" data-toggle="#pencil" data-default="'click'">{{$url}}</a>
         <a href="#" id="pencil" style="float: right"><i class="fa fa-pencil"></i></a>
     </td>
</tr>

和

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-editable.js"></script>

<script>

   $(function(){
   $('#pencil').click(function(e){
       e.stopPropagation();
       $('#username').editable('toggle');
       $('#pencil').hide();
    });
    $(document).on('click', '.editable-cancel, .editable-submit', function(){
       $('#pencil').show();
    });
 });
</script>

結果： Uncaught TypeError: $(...).editable is not a function ( $('#username').editable('toggle'); - 這里)

但是當我只有$('#username').editable(); 默認情況下，一切正常，但在此元素上。 當我點擊一個按鈕（#pencil）時需要它工作。

有人能幫我嗎？ 我已經在這方面花費了很多時間。 我真的看不出有什么問題。

Answer 1

對於在 asp.net mvc 部分視圖上遇到此錯誤的人，我通過僅在主視圖中添加引用來解決此問題。

我在所有局部視圖中添加了 jquery 和 xeditable 引用，它們相互沖突。

Answer 2

我也遇到了同樣的錯誤，但后來我意識到這個版本的 boostrap.editable.js(cdn) 似乎有一個錯誤，

因為您在 CDN 網絡上，所以不可能在那里進行更改。

您所能做的就是使用定義了此功能的不同穩定版本的cdn。

只需將此 CDN 放在您的后面，它就會為您的窗口上下文初始化 .editable 函數。

 <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

希望它有效。