javascript - jQuery 单击附加元素不起作用

Question

我有一个数组。我正在从 Array 获取数据并在 jQuery Append to list 中使用它。但是当我单击列表项时，它只显示最后一个元素。

var array = [[1,2,7],[3,4,8],[5,6,9]];
for (var i = 0; i < array.length; i++){
    var firstVal = array[i].[0];
    var secondVal = array[i].[1];
    var thirdVal = array[i].[2];

    var list = "<div class='divClass' <p class='class1'>"+ firstVal +"</p>"
             + "<p class='class2'>"+ secondVal +"</p></div>";
    $("#myDiv").append(list);
    $(".divClass").on('click', function(){
        alert(thirdVal);
    })
}

当我单击每个项目时，它总是显示 thirdVal 的最后一个值，即 9。如何动态获取第三个值？

Answer 1

将事件处理程序移至 for 循环之外，并使用 .data(key, value) 保留任意数据与元素，稍后可以使用 重试。当前元素上下文中的 data(key)。

此外，检索数组元素时出现语法错误

var array = [
  [1, 2, 7],
  [3, 4, 8],
  [5, 6, 9]
];
for (var i = 0; i < array.length; i++) {
  //Rectify syntax errors while reading 
  var firstVal = array[i][0];
  var secondVal = array[i][1];
  var thirdVal = array[i][2];

  var list = "<div class='divClass'><p class='class1'>" + firstVal + "</p>" + "<p class='class2'>" + secondVal + "</p></div>";
  $(list).data('item', thirdVal).appendTo("#myDiv");
}


$(".divClass").on('click', function() {
  console.log($(this).data('item'));
})

.divClass {
  border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv'></div>

<小时/>

或者，使用 let 而不是 var 并将元素处理程序绑定(bind)到元素，然后将其附加到列表。一本好书What's the difference between using "let" and "var" to declare a variable?

var array = [
  [1, 2, 7],
  [3, 4, 8],
  [5, 6, 9]
];
for (var i = 0; i < array.length; i++) {
  //Rectify syntax errors while reading 
  var firstVal = array[i][0];
  var secondVal = array[i][1];
  let thirdVal = array[i][2];

  var list = "<div class='divClass'><p class='class1'>" + firstVal + "</p>" + "<p class='class2'>" + secondVal + "</p></div>";

  $(list).on('click', function() {
    console.log(thirdVal);
  }).appendTo("#myDiv");
}

.divClass {
  border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv'></div>