CODEWITHSUNDEEP
javascriptjquery
Devil's Dream
Devil's Dream

Reputation: 715

jQuery click on Appended Element not working

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?

Upvotes: 0

Views: 100

Answers (5)

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 2

Sagar V
Sagar V

Reputation: 12478

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

Upvotes: 0

Pradeep
Pradeep

Reputation: 4872

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

Upvotes: 0

Hemal
Hemal

Reputation: 3760

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

Upvotes: 0

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

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

Upvotes: 0

Related Questions