doc.addEventListener 不是函数

Question

在我的页面上，我正在根据 jsTree angular 指令渲染一棵树。我正在尝试为具有描述字段的特定节点在悬停时显示工具提示。我已经检查了 jsTree 的 API 列表，并在悬停事件侦听器 hover_node 上找到了，借助 jsTree 的帮助 angular 指令，我已经为这个侦听器设置了我的范围函数

 <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
           });
         }
     };

当我将鼠标悬停在任何节点上时，我的功能运行良好，我可以在控制台中看到对象数据，因此我编写了一段代码，如果 typeof 节点描述不等于未定义，则允许在控制台中查看描述。它适用于控制台，但是当我为此节点添加函数 bootstrap 工具提示以将描述显示为工具提示时，我遇到了下一个错误

Uncaught TypeError: doc.addEventListener is not a function

正如我从这里的一些主题中了解到的，这个错误的本质是数组没有 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 的 original 对象是一个 jsTree 节点，而不是 DOM 元素：

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

改为使用 jsTree 的 get_node 方法从节点中检索 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

doc.addEventListener 不是函数

doc.addEventListener is not a function

javascript

jquery

jstree

angularjs