Javascript 动态元素正在从上次单击的元素中获取数据

我试图将ajax获取的数据添加到元素中，这些元素通过jquery动态添加到DOM中。元素具有相同的类，但ID不同。它们是通过“单击”事件添加的。一切正常。问题是所有附加的元素都显示由上次单击的项的ID获取的数据。 我不确定如何在JSFIDLE中演示这一点，但下面是我所谈论的内容的一个概念 HTML:

第1项 第2项 第3项
JS:

//如何将框添加到DOM
$（'li.options'）。单击（函数（）{
id=$（this.attr（'id'）；
$（'.box'）。追加（''）；
//通过ajax获取数据
$.ajax({
键入：“POST”，
url:“/echo/json/”，
数据类型：“json”，
cache:false，
数据：{
“id”：id
},
成功：功能（res）{
$（this）.find（'box-content'）.append（res）；
}
});
});

下面是JSFIDLE中的示例

假设接收到的数据等于ID。即，如果单击项目1，返回的数据（通过ajax）为1，如果单击项目2，则返回2，以此类推

现在，如果我单击项目1，将附加带有“1”的框。如果我点击项目2，框2会被追加，但框1和框2的值都是2（上次点击的项目）。如果我单击3，3个框将有3个

---

我怎样才能解决这个问题？有人请

你可以在我的评论中看到我的变化

//如何将框添加到DOM
$（'li.options'）。单击（函数（）{
//在id之前插入变量
var id=$（this.attr（'id'）；
//为了确保它将显示良好的“id”，我在框内容中添加id值。您可以在自己的代码中删除它
$（'.box'）.append（''+id+''）；
//通过ajax获取数据
$.ajax({
键入：“POST”，
url:“/echo/json/”，
数据类型：“json”，
cache:false，
数据：{
“id”：id
},
成功：功能（res）{
$（this）.find（'box-content'）.append（res）；
}
});
});
li{
光标：指针；
}
.盒子{
背景：红色；
高度：50px；
宽度：50px；
}
.方框内容{
宽度：100%；
身高：100%；
颜色：#fff；
}

第1项
第2项
第3项


当我运行你的小提琴时，只需添加一个小段，它就会在每个框中显示正确的id。但是，您的小提琴代码中有一个bug。你的代码是：

 $('.boxes').append('<div class="box" id="'+id+'"><div class="box-content"></div></div>');

$（'.box'）。追加（''）；

我将其更新为在每个红色框中显示id：

 $('.boxes').append('<div class="box" id="'+id+'">'+id+'<div class="box-content"></div></div>');

$（'.box'）。追加（''+id+''）；

代码中的错误在于，您使用与源代码行项目相同的ID命名每个目标框，这会导致多个具有相同ID的dom对象。当您按ID检索时，这会给您带来非常不规则的结果。如果您将代码更新为以下内容，则在首次选择FIDLE中的每个行项目时，目标框将具有唯一的id。如果要允许每一行项目被多次单击，则需要添加一个递增的单例变量以保持框id的唯一性

在第一次迭代中是唯一的

 $('.boxes').append('<div class="box" id="box'+id+'">'+id+'<div class="box-content"></div></div>');

$（'.box'）。追加（''+id+''）；

每次迭代都是唯一的：

var _s_iter = 0;
$('li.options').click(function() {
  id = $(this).attr('id');
  console.log(id)
  $('.boxes').append('<div class="box" id="box_'+_s_iter+'_'+id+'">'+id+'<div class="box-content"></div></div>');
_s_iter++;
  //Fetching data via ajax

var\u s\u iter=0；
$（'li.options'）。单击（函数（）{
id=$（this.attr（'id'）；
控制台日志（id）
$（'.box'）.append（''+id+''）；
_s_iter++；
//通过ajax获取数据

希望这对您有所帮助
您所说的
值是什么？不确定这是否是全部问题，但您在find:
$（this.find（'.box content'）.append（res）；
中缺少了一个
。
在id=$（this.attr（'id'）；）附近的第三行（包括您的第一条注释）有一个错误。它应该是
var id=$（this.attr（'id'））
在ajax中，成功的
不是li，而是window，因此我认为追加将影响文档中的所有“框”内容。使用这样的ID会起作用。但是，当您使用ajax获取数据时，请记住，每次单击时，将发送的ajax请求都是ID的ID您没有单击。这意味着如果我单击第3项，ajax请求将以ID 3发送。问题就在代码的这一部分附近：
$（this.find（'box-content'）。append（res）；
。尝试以下操作：
$（'div#'+ID）。find（'box-content'）。append（res）；
 $('.boxes').append('<div class="box" id="box'+id+'">'+id+'<div class="box-content"></div></div>');

var _s_iter = 0;
$('li.options').click(function() {
  id = $(this).attr('id');
  console.log(id)
  $('.boxes').append('<div class="box" id="box_'+_s_iter+'_'+id+'">'+id+'<div class="box-content"></div></div>');
_s_iter++;
  //Fetching data via ajax