点击红色边框div任意区域获取dataset.fruit值的问题求助

我来帮你搞定这个问题，咱们先拆解一下为啥会出现这些状况：

核心问题1：点击内部区域返回undefined #

你现在的点击事件绑定在#allresults上，当你点击内部的<p>标签时，e.target指向的是这个<p>，而不是外层带红色边框的容器——只有容器上才有data-fruit属性，所以自然拿不到值，返回undefined。

核心问题2：绑定#widget无响应 #

首先，ID是唯一的！你循环生成了3个div，却给它们都设置了id="widget"，这本身就不符合HTML规范，浏览器只会识别第一个带这个ID的元素。其次，动态生成的元素不能直接用$('#widget').on(...)绑定事件，因为绑定代码执行时，这些元素还没被创建出来。

修正后的完整代码 #

咱们一步步改：

1. HTML部分（无需大改，保持原样）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="searchResults">
 <div id="allresults" >
 </div>
</div>
<button id=test>click me</button>

2. CSS部分：把#widget改成.widget（因为要复用样式）

#one{
 margin-left:12%;
 padding-top:8%;
 color:black;
 font-family:arial;
 font-size:15px;
}
#two{
 margin-left:3%;
 color:black;
 font-family:arial;
 font-size:17px;
 line-height:5px;
}
#three{
 margin-left:3%;
 color:black;
 font-family:arial;
 font-size:12px;
 line-height:10px;
}
#four{
 margin-left:3%;
 padding-bottom:8%;
 color:black;
 font-family:testFont1;
 font-size:12px;
 line-height:-10px;
}
.widget{
 border:1px solid red;
}

3. JavaScript部分：修复ID重复问题，正确获取父级元素的data-fruit

$("#test").on('click', begin);
function begin(){
 var test = ["apple","pear","banana"];
 var test2 = ["fish", "bird", "insect"];
 var test3 = ["iOS", "Android", "Windows"];
 var test4 = ["Mom", "Dad", "Sis"];
 // 先清空之前生成的内容，避免重复点击生成多个
 $('#allresults').empty();
 for (var i=0; i < test.length; i++){
 var listItem = document.createElement('div'),
 html = "<p class='one'>" + test[i] + '</p>' + "<p class='two'> " + test2[i] + '</p>' + "<p class='three'>" + test3[i] + '</p>' + "<p class='four'> " + test4[i] + '</p>';
 // 把id改成class，避免重复
 listItem.className='widget';
 listItem.dataset.fruit = test[i];
 listItem.innerHTML = html;
 allresults.appendChild(listItem);
 }
}
function testAlert(e){
 // 找到点击元素的父级.widget容器
 var fruitContainer = $(e.target).closest('.widget');
 // 获取容器上的data-fruit值
 var fruit = fruitContainer.data('fruit');
 alert(fruit);
}
// 事件委托绑定在#allresults上，监听.widget的点击
$('#allresults').on('click', '.widget', testAlert);

关键改动说明 #

• 把#widget改成.widget：解决ID重复问题，符合HTML规范，同时能给所有容器应用红色边框样式。
• 用closest('.widget')获取父容器：不管你点击的是容器内的哪个元素，都能找到带data-fruit的外层容器，确保能拿到正确的fruit值。
• 事件委托优化：直接把委托事件绑定到.widget上（通过$('#allresults').on('click', '.widget', testAlert)），这样只有点击到容器区域才会触发弹窗，更精准。
• 新增$('#allresults').empty()：避免重复点击按钮时生成重复的容器。

这样改完之后，不管你点击红色边框div内的任何区域，都会弹出对应的fruit名称啦！

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