运行时创建自定义Select组件下拉功能失效问题求助

动态追加的自定义下拉组件功能失效，核心原因是交互事件只绑定到了页面初始加载时存在的DOM元素上，动态生成的元素没有被绑定事件。静态创建的组件在页面加载时就存在，事件绑定能正常生效；但通过appendTo动态插入的元素，是在事件绑定完成后才加入DOM的，所以原来的点击展开、选择选项等事件不会作用到它们。

解决方法一：使用事件委托（推荐） #

将事件绑定到一个始终存在的父级元素（比如你的#modal-content），利用事件冒泡机制监听动态元素的事件。这样不管元素是静态还是动态创建，都能触发交互：

// 监听下拉框的展开/收起事件
$('#modal-content').on('click', '.psuedo_select', function() {
  $(this).find('.options').toggle();
});

// 监听选项选择事件
$('#modal-content').on('click', '.option', function() {
  const selectedText = $(this).text();
  const selectedValue = $(this).data('value');
  // 更新选中显示文本和父元素的value
  $(this).closest('.psuedo_select').find('.selected').text(selectedText);
  $(this).closest('.psuedo_select').parent().data('value', selectedValue);
  // 收起下拉列表
  $(this).closest('.options').hide();
});

解决方法二：动态创建后手动绑定事件 #

在CREATE_OPTION函数中，元素被追加到DOM后，立即给新生成的下拉组件绑定事件：

function CREATE_OPTION() {
  var varForm = '<label id="img_category_label" class="field" for="img_category" data-value="">';
  varForm += '<span>Category</span>';
  varForm += '<div id="img_category" class="psuedo_select" name="img_category">';
  varForm += '<span class="selected"></span>';
  varForm += '<ul id="img_category_options" class="options">';
  varForm += '<li class="option" data-value="opt_1">Option 1</li>';
  varForm += '<li class="option" data-value="opt_2">Option 2</li>';
  varForm += '</ul>';
  varForm += '</div>';
  varForm += '</label>';
  
  // 追加元素并保存到变量
  const $newSelect = $(varForm).appendTo("#modal-content");
  
  // 给新组件绑定展开/收起事件
  $newSelect.find('.psuedo_select').click(function() {
    $(this).find('.options').toggle();
  });
  
  // 给新组件的选项绑定选择事件
  $newSelect.find('.option').click(function() {
    const selectedText = $(this).text();
    const selectedValue = $(this).data('value');
    $(this).closest('.psuedo_select').find('.selected').text(selectedText);
    $(this).closest('.psuedo_select').parent().data('value', selectedValue);
    $(this).closest('.options').hide();
  });
}

这两种方法都能解决动态组件的交互失效问题，其中事件委托更简洁，尤其适合需要多次动态创建组件的场景。

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