Javascript 无论在div中单击何处，我都希望获取数据集值

各位，请访问我的代码片段。我在任何地方都找不到这个问题的答案。我已经试了三天了

我想要达到的目标

用户单击按钮

它显示了带有红色边框的3个框

在红色盒子里的任何地方轻敲都会给我那个盒子的水果名称

现在的问题是：当我点击某些区域时，它会工作，但其他区域会给我未定义的信息。我想在js部分的最后一行调用div小部件，而不是allresults div，但什么都没有发生，根本没有警报：

$('#widget').on('click',  testAlert);

$（“#测试”）。在（'click'，begin'）；
函数begin（）{
var检验=[“苹果”、“梨”、“香蕉”]；
var test2=[“鱼”、“鸟”、“昆虫”]；
var test3=[“iOS”、“Android”、“Windows”]；
var test4=[“妈妈”、“爸爸”、“姐姐”]；
对于（变量i=0；i”+测试[i]+'
'
+“
”+test2[i]+'
'
+“
”+test3[i]+'
'
+“
”+test4[i]+'
”；
id='widget'；
listItem.dataset.fruit=测试[i]；
listItem.innerHTML=html；
allresults.appendChild（列表项）；
}
}
功能测试器（e）{
var fruit=e.target.dataset.fruit；
警惕（水果）；
}
$（#allresults'）。在（'click'，testAlert'）
#一个{
左缘：12%；
垫顶：8%；
颜色：黑色；
字体系列：arial；
字体大小：15px；
}
#两个{
左缘：3%；
颜色：黑色；
字体系列：arial；
字号：17px；
线高：5px；
}
#三{
左缘：3%；
颜色：黑色；
字体系列：arial；
字体大小：12px；
线高：10px；
}
#四{
左缘：3%；
垫底：8%；
颜色：黑色；
字体系列：testFont1；
字体大小：12px；
线高：-10px；
}
#小部件{
边框：1px纯红；
}

单击需要的我，而不是所有结果


$（“#测试”）。在（'click'，function（）{
var检验=[“苹果”、“梨”、“香蕉”]；
var test2=[“鱼”、“鸟”、“昆虫”]；
var test3=[“iOS”、“Android”、“Windows”]；
var test4=[“妈妈”、“爸爸”、“姐姐”]；
对于（变量i=0；i”+测试[i]+'
'
+“
”+test2[i]+'
'
+“
”+test3[i]+'
'
+“
”+test4[i]+'
”；
id='widget'；
listItem.dataset.fruit=测试[i]；
listItem.innerHTML=html；
allresults.appendChild（列表项）；
}
});
//向动态创建的DIV添加onclick处理程序
$（'#allresults'）。在（'click'，'div'，function（）{
var fruit=this.dataset.fruit；
警惕（水果）；
});
#一个{
左缘：12%；
垫顶：8%；
颜色：黑色；
字体系列：arial；
字体大小：15px；
}
#两个{
左缘：3%；
颜色：黑色；
字体系列：arial；
字号：17px；
线高：5px；
}
#三{
左缘：3%；
颜色：黑色；
字体系列：arial；
字体大小：12px；
线高：10px；
}
#四{
左缘：3%；
垫底：8%；
颜色：黑色；
字体系列：testFont1；
字体大小：12px；
线高：-10px；
}
#小部件{
边框：1px纯红；
}

单击我
这是因为单击时的e.target可以是小部件div元素中的子（p）元素。在这种情况下，必须按如下方式访问其父元素：

function testAlert(e){
  var t = e.target;
  if (t.id != "widget") t = t.parentElement;
  var fruit = t.dataset.fruit; 
  alert(fruit);
}

以下是完整的片段：


$（“#测试”）。在（'click'，begin'）；
函数begin（）{
var检验=[“苹果”、“梨”、“香蕉”]；
var test2=[“鱼”、“鸟”、“昆虫”]；
var test3=[“iOS”、“Android”、“Windows”]；
var test4=[“妈妈”、“爸爸”、“姐姐”]；
对于（变量i=0；i”+测试[i]+'
'
+“
”+test2[i]+'
'
+“
”+test3[i]+'
'
+“
”+test4[i]+'
”；
id='widget'；
listItem.dataset.fruit=测试[i]；
listItem.innerHTML=html；
allresults.appendChild（列表项）；
}
}
功能测试器（e）{
var t=e.target；
如果（t.id！=“widget”）t=t.parentElement；
var fruit=t.dataset.fruit；
警惕（水果）；
}
$（#allresults'）。在（'click'，testAlert'）
#一个{
左缘：12%；
垫顶：8%；
颜色：黑色；
字体系列：arial；
字体大小：15px；
}
#两个{
左缘：3%；
颜色：黑色；
字体系列：arial；
字号：17px；
线高：5px；
}
#三{
左缘：3%；
颜色：黑色；
字体系列：arial；
字体大小：12px；
线高：10px；
}
#四{
左缘：3%；
垫底：8%；
颜色：黑色；
字体系列：testFont1；
字体大小：12px；
线高：-10px；
}
#小部件{
边框：1px纯红；
}

点击我
你是最棒的！终于过了3天！谢谢你，迈克！事实上，事件处理程序可以附加到#allresults（正如我在下面的回答中所做的那样），但是我们应该检查它是否是true元素或者我们需要它的parentElement。您的方法在这里工作，但在更一般的情况下，如果他也对子元素使用DIV（而不是P），那么它将不工作。