无论我在div中点击哪里，我想获得我的数据集值

Question

所以，伙计们请访问我的codeSnippet。我无法在3天内尝试这个问题找到这个问题的答案。

我想要实现的目标

1. 用户单击该按钮。
2. 它显示了3个带红色边框的方框。
3. 点击红色框中的任何位置都应该给我这个盒子的水果名称

现在的问题是：当我点击某些区域时它可以工作，但其他区域给我未定义。我想在我的js部分的最后一行调用div小部件而不是像这样的allresults div，但没有任何事情发生任何警报：

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

$("#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"];
  
  for (var i=0; i < test.length; i++){
    
    var listItem = document.createElement('div'),
    html = "<p id='one'>" + test[i] + '</p>' 
         + "<p id='two'> " + test2[i] + '</p>'
         + "<p id='three'>" + test3[i] + '</p>'
         + "<p id='four'> " + test4[i] + '</p>';
     listItem.id='widget';
                  
      
    listItem.dataset.fruit = test[i];
    listItem.innerHTML = html;
    allresults.appendChild(listItem);
  }
}

function testAlert(e){
		var fruit = e.target.dataset.fruit; 
    alert(fruit);
}

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

#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;
}

<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>

Answer 1

你需要attach an event handler to the dynamically-created DIV elements，而不是#allresults。

$("#test").on('click',  function (){
  var test = ["apple","pear","banana"];
  var test2 = ["fish", "bird", "insect"];
  var test3 = ["iOS", "Android", "Windows"];
  var test4 = ["Mom", "Dad", "Sis"];
  
  for (var i=0; i < test.length; i++){
    
    var listItem = document.createElement('div'),
    html = "<p id='one'>" + test[i] + '</p>' 
         + "<p id='two'> " + test2[i] + '</p>'
         + "<p id='three'>" + test3[i] + '</p>'
         + "<p id='four'> " + test4[i] + '</p>';
     listItem.id='widget';
                  
      
    listItem.dataset.fruit = test[i];
    listItem.innerHTML = html;
    allresults.appendChild(listItem);
  }
});


// add an onclick handler to dynamically-created DIV
$('#allresults').on('click', 'div', function () {
		var fruit = this.dataset.fruit; 
    alert(fruit);
});

#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;
}

<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>

Answer 2

这是因为点击时的e.target可以是widget div元素中的child（p）元素。在这种情况下，您必须访问其父元素，如下所示：

function testAlert(e){
  var t = e.target;
  if (t.id != "widget") t = t.parentElement;
  var fruit = t.dataset.fruit; 
  alert(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"];
  
  for (var i=0; i < test.length; i++){
    
    var listItem = document.createElement('div'),
    html = "<p id='one'>" + test[i] + '</p>' 
         + "<p id='two'> " + test2[i] + '</p>'
         + "<p id='three'>" + test3[i] + '</p>'
         + "<p id='four'> " + test4[i] + '</p>';
     listItem.id='widget';
      
    listItem.dataset.fruit = test[i];
    listItem.innerHTML = html;
    allresults.appendChild(listItem);
  }
}

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

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

#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;
}

<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>