jQuery使用trigger触发click事件无法获取目标ID，如何指定触发源ID？

我编写了以下jQuery代码用于触发click事件：

$(document).on('click','#button1, #button2',function(e){
     console.log(e.target.id);
    
     if (e.target.id == 'button1') {
         $( "#widgetA .closeresults" ).trigger( "click" );
     }
     else {
         $( "#widgetB .closeresults" ).trigger( "click" );
     }
 });

触发的事件对应执行以下代码，但e.target.id始终为空：

$(document).on('click','#widgetA .closeresults, #widgetB .closeresults',function(e){
      console.log(e.target.id)
      if (e.target.id == 'widgetA') {
          //执行操作A
      }
      else {
         //执行操作B
      }
 });   

问题：如何获取触发该事件的元素ID？

更新需求 #

若点击button1，我希望触发上述第二段代码的click事件时，返回widgetA作为target.id（这是触发事件的目标组件），该如何实现？

1. 问题根源 #

• 用trigger("click")手动触发事件时，e.target指向的是.closeresults元素，而非其父容器#widgetA/#widgetB。如果.closeresults本身未设置id，e.target.id自然为空。
• 原代码逻辑错误：试图将父容器的id与子元素的e.target.id做对比，两者不匹配。

2. 具体实现方案 #

方案一：传递自定义数据

在触发事件时携带目标组件ID，事件处理函数直接读取该数据：

// 修改触发事件的代码
$(document).on('click','#button1, #button2',function(e){
     console.log(e.target.id);
    
     if (e.target.id == 'button1') {
         $( "#widgetA .closeresults" ).trigger( "click", { widgetId: 'widgetA' });
     }
     else {
         $( "#widgetB .closeresults" ).trigger( "click", { widgetId: 'widgetB' });
     }
 });

// 修改事件处理代码
$(document).on('click','#widgetA .closeresults, #widgetB .closeresults',function(e, data){
      // 优先使用传递的自定义ID，兼容手动点击场景
      const targetId = data?.widgetId || $(this).closest('#widgetA, #widgetB').attr('id');
      console.log(targetId);
      
      if (targetId == 'widgetA') {
          //执行操作A
      }
      else {
         //执行操作B
      }
 });   

方案二：向上查找父容器

无需修改触发逻辑，直接在事件处理函数中通过DOM关系定位父容器：

$(document).on('click','#widgetA .closeresults, #widgetB .closeresults',function(e){
      // 查找最近的目标父容器
      const targetId = $(this).closest('#widgetA, #widgetB').attr('id');
      console.log(targetId);
      
      if (targetId == 'widgetA') {
          //执行操作A
      }
      else {
         //执行操作B
      }
 });   

方案对比 #

• 方案一：不受DOM结构影响，能精准指定目标ID，适合需要明确控制触发来源的场景；
• 方案二：代码更简洁，依赖.closeresults与#widgetA/#widgetB的父子关系，适合页面结构稳定的情况。

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