Angular+jQWidgets下拉按钮JSON数据源致OnSelect事件触发两次的解决方法

我之前在项目里也碰到过一模一样的问题——用HTML写树形结构完全正常，换成JSON数据源后select事件就触发两次，折腾了一阵终于找到几个靠谱的解决办法，分享给你：

1. 先移除旧监听再绑定新事件（最常用） #

大概率是因为JSON数据源绑定过程中，Tree组件内部重新渲染导致事件被重复注册了。我们可以在绑定事件前先移除已存在的监听，确保每次只有一个事件回调生效：

ngAfterViewInit(): void {
  // 先清除已有的select事件监听，避免重复绑定
  this.tree.off('select');
  
  // 再注册我们的事件处理逻辑
  this.tree.on('select', (event: any) => {
    const selectedItem = event.args.element;
    console.log('选中的节点:', selectedItem);
    // 这里写你的业务逻辑
  });

  // 如果是动态设置数据源，确保在绑定事件前完成数据源赋值
  this.tree.source(this.treeSource);
}

2. 控制数据源的设置时机，避免重复赋值 #

如果你的组件变更检测触发比较频繁，或者在多个生命周期钩子（比如ngOnInit和ngAfterViewInit）里都设置了数据源，会导致Tree组件反复渲染，进而重复绑定事件。可以把数据源设置放在ngOnInit里只执行一次，再配合变更检测控制：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit(): void {
  // 仅在组件初始化时设置一次数据源
  this.tree.source(this.treeSource);
  // 手动触发变更检测，避免后续不必要的渲染
  this.cdr.detectChanges();
}

ngAfterViewInit(): void {
  this.tree.on('select', (event: any) => {
    // 处理选中逻辑
  });
}

3. 利用DropDownButton的initContent回调绑定事件 #

因为Tree是嵌套在DropDownButton里面的，按钮展开时可能会重新初始化内容区域。我们可以借助DropDownButton的initContent回调，在内容初始化完成后再绑定Tree的事件，确保每次展开时事件只绑定一次：

// 在组件里定义DropDownButton的配置
dropDownButtonSettings: jqwidgets.DropDownButtonOptions = {
  initContent: () => {
    // 获取Tree的原生实例，先移除旧监听再绑定新的
    const treeElement = this.tree.nativeElement;
    $(treeElement).off('select').on('select', (event: any) => {
      console.log('选中节点:', event.args.element);
      // 业务逻辑
    });
  }
};

然后在模板里绑定这个配置：

<jqxDropDownButton #myDropDownButton [settings]="dropDownButtonSettings">
  <jqxTree #treeReference></jqxTree>
</jqxDropDownButton>

4. 检查是否存在双重绑定 #

最后别忘了检查你的模板和代码里是不是同时绑定了事件——比如模板里写了(onSelect)="handleSelect()"，同时代码里又用this.tree.on('select', ...)，这种情况肯定会触发两次事件，只保留一种绑定方式就好。

内容的提问来源于stack exchange，提问作者JimmyN