X-editable $(...).editable n'est pas une fonction

Question

J'ai

 <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>

y

<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>

En conséquence : Uncaught TypeError : $(...).editable n'est pas une fonction ( $('#username').editable('toggle'); - ici)

mais quand j'avais juste $('#username').editable(); tout fonctionne bien, par défaut, mais sur cet élément. J'ai besoin que cela fonctionne lorsque je clique sur un bouton (#pencil).

Quelqu'un peut-il m'aider ? J'ai déjà passé beaucoup de temps sur ce sujet. Et je ne vois vraiment pas ce qui ne va pas.

Answer 1

Pour quelqu'un qui obtient cette erreur sur une vue partielle asp.net mvc, j'ai résolu le problème en ajoutant la référence uniquement dans la vue principale.

J'avais ajouté des références jquery et xeditable dans toutes les vues partielles, qui étaient en conflit les unes avec les autres.