javascript - 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 部分 View 上遇到此错误的人，我通过仅在主视图中添加引用来解决此问题。

我在所有局部 View 中添加了 jquery 和 xeditable 引用，它们相互冲突。