向循环内动态生成的 DIV 添加点击事件，显示弹出 window 并在 Javascript 中为每个 DIV 提供不同的文本

Question

What I'm try to achieve is to dynamically create buttons through javascript/jquery and attach a "click" event on them, so that each button will show up a popup window with some text inside that is different for every iteration (the data is taken from an array). However I'm struggling with passing the data inside the "click" function, because at the moment the scripts only returns the final value of the var i inside the loop or no value at all. Here's the code:

 let heroStartingInventory = []; let heroStartingInventoryDescription = []; heroStartingInventory.push(itemList[0], itemList[2]); heroStartingInventoryDescription.push(itemListDescription[0], itemListDescription[2]); var i = 0; while(i < heroStartingInventory.length) { $('#chara-select-rightcol-content').append( '<div id="item-'+ i + '" class="button">'+ heroStartingInventory[i] +'</div>' ); $(' #item-'+i).on('click', function(){ new popupWindow(heroStartingInventory[i], heroStartingInventoryDescription[i]); }); i++; }

with this code popupWindow(heroStartingInventory[i], heroStartingInventoryDescription[i]); shows no value. If I change it just for testing purpose in popupWindow(i, i);, each button just shows the last value of i (in this case 2) after the loop is broken.

Thank you for your time!

Answer 1

Yay, I just found the solution myself. I took the code inside the loop in a separate function outside of it. Here's the code:

 function test(index){ $('#chara-select-rightcol-content').append( '<div id="item-'+ index + '" class="button">&#9750; '+ heroStartingInventory[index] +'</div>' ); $(' #item-'+index).on('click', function(){ new popupWindow(heroStartingInventory[index], heroStartingInventoryDescription[index]); }); } while(i < heroStartingInventory.length) { test(i); i++; }