jQuery нажмите на Добавленный элемент не работает

Question

У меня есть массив. Я получаю данные из массива и использую его в jQuery Append для списка. Но когда я нажимаю на элемент списка, он показывает только последний элемент.

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 и привязать обработчик элемента к элементу затем добавить его в список. Хороший прочитать 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>

Answer 2

вы должны использовать this в функции мыши, чтобы обратиться к текущему элементу щелкнул из списка:

$(".divClass").on('click', function(e){ 
var index = $(this).index(); 
var text = $(this).text(); 
     alert('text: ',text, 'index: ',index); 
e.preventDefault(); 
    }); 

Ожидать, что это поможет вам.

ТКС

Answer 3

Вы должны переместить событие вне цикл

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

} 
    $(document).on('click','.divClass', function(){ 
     alert(thirdVal); 
    }) 

Answer 4

Вы можете попробовать это?

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

Answer 5

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><p style='display:none' class='thv"+i+"'>"+thirdVal+"</p></div>"; // change here 
    $("#myDiv").append(list.cloneNode(true)); // Clone the node here 
    $(".divClass").on('click', function(){ 
     alert(document.getElementsByClassName("thv"+i)[0].innerHTML); // change here 
    }) 
} 

Если вы не клонировать узел перед Append, будет добавлен тот же узел. Если вы клонируете его, он будет создавать копию каждый раз. Теперь проверьте это. Также есть проблема, что вы предупреждаете thirdVal. Он сохранит последнее значение. Итак, создайте объект со стилем display:none и добавьте к нему третье значение. Затем используйте alert(<theobject>.innerHTML);