为 jqtree 中的 select 节点和删除图标生成不同的事件

Question

以下是我的代码：

var nodeData = ${jsonArray}; // my json data
$('#tree1')
            .tree(
                    {
                        data : nodeData,
                        autoOpen : 1,
                        onCreateLi : function(node, $li) {                              
                            $li
                                    .find('.jqtree-element')
                                    .append(
                                            '<a href="javascript:void(0);" class="delete" data-node-id="Test"><i class="ico ico-tool-delete"></i></a>');
                        }
                    });

    $('#tree1').bind('tree.click', function(event) {
        if (event.node) {               
            var node = event.node;
            alert("edit");

        }
        $tree.on('click', '.Test', function(e) {
            alert("delete");
        });
    });

我想在点击节点和删除图标时生成不同的事件。

目前当我点击节点和删除图标时都生成相同的事件。

帮帮我，上面的代码需要修改什么。

谢谢

Answer 1

首先，您尝试使用 class 测试 select 元素，但此 class 不存在。

此外，删除图标位于 li 节点元素内，这就是触发相同事件的原因。

尝试像这样追加删除的 a 元素：

$('#tree1').tree({
     data : nodeData,
     autoOpen : 1,
     onCreateLi : function(node, $li) {   
          $li.append(
              '<a href="#" class="delete" data-node-id="Test"><i class="ico ico-tool-delete">Delete</i></a>');
          }
     });

检查fiddle

编辑：

您可以在追加删除元素时将节点 ID 另存为数据 attribute。然后，当您单击特定的删除元素时，通过 id:

获取所需的节点

var node = $tree.tree('getNodeById', $(this).data('parent-id'));

然后删除此项：

$tree.tree('removeNode', node);

new fiddle

为 jqtree 中的 select 节点和删除图标生成不同的事件

Generate different event for both select node and delete icon in jqtree

javascript

jquery

jqtree

编辑：