Angular2：如何在TypeScript中为动态创建的Select绑定change事件

我看了你的代码，问题主要出在事件绑定的方式和选择器错误上，咱们一步步来修复：

首先，找出你代码里的两个关键问题 #

1. jQuery选择器错误：你写的$('labelDropdown')是在找名为<labelDropdown>的HTML标签，但你的下拉菜单的class是labelDropdown，正确的类选择器应该是$('.labelDropdown')（前面加个点）。
2. 动态元素的事件绑定时机：虽然你是先创建元素再绑定，但如果后续还要创建更多下拉菜单，直接用类选择器绑定会重复绑定事件到已存在的元素上，而且有时候元素还没插入DOM就绑定，可能出现意外问题。

方案1：用原生JavaScript直接绑定到创建的select元素（推荐，更贴合TypeScript） #

既然你是动态创建select元素，直接给这个元素添加change事件监听最直接，不需要依赖jQuery：

private createDropDown() { 
  const parent = document.getElementById('dropdown-container'); 
  const sel = document.createElement('select') as HTMLSelectElement; 
  sel.setAttribute('id', 'bbCount' + this.bbCount); 
  sel.setAttribute('class', 'labelDropdown'); 

  // 直接给当前创建的select绑定change事件
  sel.addEventListener('change', (e) => this.onDropdownChange(e));

  for (let i = 0; i < 8; i++) { 
    const opt = document.createElement('option') as HTMLOptionElement; 
    opt.value = String(this.labels[i].id); // 直接用value属性，不用setAttribute
    opt.textContent = this.labels[i].value; // 用textContent比innerText更标准
    sel.appendChild(opt); 
  } 
  parent.appendChild(sel); 
} 

public onDropdownChange(e: Event) { 
  const target = e.target as HTMLSelectElement;
  console.log('选中的值:', target.value);
  console.log('事件对象:', e); 
}

这里我还做了几个TypeScript的优化：

• 给创建的元素加上类型断言（as HTMLSelectElement），避免any类型，让TS能提供更好的类型提示。
• 直接用元素的value和textContent属性，比setAttribute更高效也更符合DOM规范。

方案2：用jQuery的事件委托（适合需要批量处理动态元素的场景） #

如果你坚持用jQuery，可以把事件委托到父容器dropdown-container上，这样不管后续创建多少下拉菜单，事件都会生效：

private createDropDown() { 
  const parent = document.getElementById('dropdown-container'); 
  const sel: any = document.createElement('select'); 
  sel.setAttribute('id', 'bbCount' + this.bbCount); 
  sel.setAttribute('class', 'labelDropdown'); 

  // 注意：把事件绑定到父容器，委托给.labelDropdown元素
  $('#dropdown-container').on('change', '.labelDropdown', (e) => this.onDropdownChange(e));

  for (let i = 0; i < 8; i++) { 
    const opt: any = document.createElement('option'); 
    opt.setAttribute('text', this.labels[i].value); 
    opt.setAttribute('value', String(this.labels[i].id)); 
    opt.innerText = this.labels[i].value; 
    sel.appendChild(opt); 
  } 
  parent.appendChild(sel); 
} 

这种方式的好处是不用每次创建元素都绑定事件，父容器会监听所有子元素的change事件，只要子元素匹配.labelDropdown选择器就会触发。

方案3：修正jQuery选择器并直接绑定到当前元素 #

如果你还是想直接绑定到刚创建的sel元素，也可以这样写：

// 把原来的$('labelDropdown').on(...)改成：
$(sel).on('change', (e) => this.onDropdownChange(e));

这里直接用创建好的sel元素作为jQuery的选择器参数，不用通过类名查找，避免选择器错误，也不会影响其他已存在的下拉菜单。

你可以根据自己的项目需求选择其中一种方案，推荐方案1，因为原生JS在TypeScript项目里更轻量，类型也更好控制。

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