doc.addEventListener不是一个函数

Question

在我的页面上，我基于jsTree角指令绘制了一棵树。我试图实现一个显示工具提示在悬停特别节点，其中有一个描述字段。我已经检查了jsTree的API列表，并在悬停事件侦听器hover_node上找到了jsTree的帮助角指令，我已经将我的作用域函数设置为这个侦听器。

 <js-tree
         tree-data="scope"
         tree-model="tree"
         tree-events="hover_node:nodeHovered"
         tree-core="tree_core"
></js-tree>

 $scope.nodeHovered = function (e, data) {

      var dataNode  = data.node;
      var original = dataNode.original;

      if (typeof original.description !== 'undefined'){

        var nodeDescription = original.description;

           $(original).tooltip({
              title: nodeDescription,
              animation: true
           });
         }
     };

当我在任何节点上悬停时，我的函数工作得很好，我可以在控制台中看到对象数据，所以我编写了一段代码，如果类型节点描述不是相等的未定义的话，就可以在控制台中查看描述。它在控制台上运行得很好，但是当我为这个节点添加函数引导工具提示(为了将描述显示为工具提示)时，我得到了下一个错误

Uncaught : doc.addEventListener不是函数

我可以从这里的一些主题中了解到，这个错误的本质是数组没有addEventListener函数，但是我正在处理一个已经通过库定义的对象，那么有人能帮我找到我缺少的东西吗？我很感谢你的帮助。

Plunker

我的完整代码

   var treeFolders = [];
   $scope.tree = [];


    $http.get("folders.json")
          .then(function (res) {
              treeFolders = res.data;
              angular.forEach(treeFolders, function(obj){
                   if(!("parent" in obj)){
                        obj.parent = "#";
                            }
                        })
                    })

   $scope.load = function(){
                $scope.tree = treeFolders
            };


   $scope.tree_core = {
                multiple: false,  // disable multiple node selection
                check_callback: function (operation, node, node_parent, node_position, more) {
                return true;  // allow all other operations
                },
                themes : {
                    theme : "default",
                    dots : true,
                    icons : true
                }
            };

   $scope.nodeHovered = function (e, data) {

      var dataNode  = data.node;
      var original = dataNode.original;

      if (typeof original.description !== 'undefined'){

        var nodeDescription = original.description;

           $(original).tooltip({
              title: nodeDescription,
              animation: true
           });
         }
     };

html

   <button class="btn btn-default" ng-click="load()">Load Tree</button>

   <js-tree
           tree-data="scope"
           tree-model="tree"
           tree-events="hover_node:nodeHovered"
           tree-core="tree_core"
></js-tree>

Answer 1

这是因为在下面的代码中传递给jQuery的jQuery对象是一个jsTree节点，而不是DOM元素：

$(original).tooltip({
  title: nodeDescription,
  animation: true
});

相反，使用jsTree的jsTree方法从节点检索jQuery包装的DOM元素：

var liElement = data.instance.get_node(data.node, true);

这将为您提供整个li元素，但您可能希望工具提示相对于a元素：

var aElement = liElement.children('a').first();

然后：

aElement.tooltip({
  title: nodeDescription,
  animation: true
}).tooltip('show');

请注意，我在最后添加了一个对tooltip的额外调用。这是为了在元素第一次悬停时显示工具提示。没有这一点，工具提示将在第一个悬停时创建，然后直到下一个悬停时才会显示。

演示： https://plnkr.co/edit/itMSrsroTVswD3RLbs7O?p=preview