jQuery click on Appended Element not working

Question

I have an array. I am getting data from Array and using it in jQuery Append to list. But when I am clicking on list item its only showing the last element.

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

When I am clicking on each item it always shows the last value of thirdVal that is 9. How can I get the Third value dynamically?

Answer 1

Move the event handler outside the for loop and persist the arbitrary data with element using .data(key, value) which can later be retried using .data(key) in the current element context.

Additionally, You have syntax error while retrieving array elements

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>

---

Or, use let instead of var and bind element handler to element then append it to list. A good read 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

you must use this in the click function to refer to the current item clicked from list:

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

Expect this help you.

tks

Answer 3

You have to move the event outside for loop

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

Can you try this ?

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

If you didn't clone a node before append, the same node will be added. If you cloned it, it will create a copy every time. Now check it. Also there is a problem that you are alerting thirdVal. It will store the last value. So, create an object with style display:none and add third value to it. Then use alert(<theobject>.innerHTML);