使用JQUERY将ajax获取的数据添加到动态添加的元素中

我试图将ajax获取的数据添加到元素中，这些元素通过jquery动态添加到DOM中。元素具有相同的类，但ID不同。它们是通过“单击”事件添加的。一些建议告诉我如何才能做到这一点。我现在的问题是，每次单击list添加元素时，它都会获取与该ID无关的数据。 HTML列表如下所示：

<li id="23" class="options">Item 23</li> 
<li id="24" class="options">Item 24</li>
<li id="25" class="options">Item 25</li>

第23项
第24项
第25项

这是我的js：

var box = '<div class="box" id="{0}"><div class="box-content"></div></div>';
//how to add the box to the DOM
$('li.options').click(function(){
  id = $(this).attr('id');
  $(boxes).append(box.format(id));
  //Fetching data via ajax
  $.ajax({
     type: 'POST',
     url: 'fetch.php',
     dataType: 'json',
     cache: false,
     data: {'id' : id},
     success: function(res){
        $(this).find('box-content').append(res);
     }
  });
});

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

到目前为止，一切正常。元素被正确地追加。如果单击“列表23”，则会附加“框id 23”。清单24和25也是一样。（方框正确地附加了相应的ID）。我的问题是在获取数据时。如果我单击列表23，23的数据将正确地追加到框24中，但当我单击列表24时，甚至会追加为列表23获取的数据。（23号仍然开放）。所以我最后在第二个附加的盒子上有“双重数据”，第三个附加的盒子上有“三重数据”。。。等等

有人知道我该怎么解决这个问题吗？ 我曾想过让ajax退出click事件，但我不知道可以使用哪个事件触发它。然而，我愿意接受任何关于如何解决这个问题的建议。我已经有这个问题好几个月了。任何想法都欢迎

---

提前谢谢

以下是我在您的javascript中更改的内容。您可以看到，我只为每个

id

追加一次框。然后，我将AJAX替换为一个调用，以将内容设置为

id

据我所知，这就是你所追求的

$('li.options').click(function() {
  id = $(this).attr('id');
  if($("#" + id + ".box").length <= 0){
      $('.boxes').append('<div class="box" id="'+id+'"><div class="box-content"></div></div>');
  //Fetching data via ajax
      $("#" + id + ".box > .box-content").html(id);
}});

$（'li.options'）。单击（函数（）{
id=$（this.attr（'id'）；
if（$（“#”+id+“.box”）.length
empty（）
在添加内容之前先添加框内容？问题有点不清楚。你能创建一个功能示例吗？谢谢。这已经成功了。但是，最后一个附加框的数据会附加到所有框中。你知道如何解决这个问题吗？我想你的类选择器“框内容”可能太模糊了。取决于HTML结构e$.find（）函数可以返回多个DOM元素。似乎您正在将结果附加到多个“框内容”中，而没有任何意义。我不确定如何在JSFIDLE中发出ajax请求，但下面是一个示例，我所说的假设响应是列表23中的23，列表24中的24，列表25中的25，现在这些框将为la获取数据st单击的项。例如，当我首先单击框23时，需要23，然后单击框25时，两个框上都会有25。我仍然不清楚您想要的功能是什么。是否希望每次单击列表项时都有一个新框？是否希望上一个单击的框仍然可见？还是希望反复使用一个框呃？这是非常有用的。但是当你使用ajax时，它会产生不同的结果。如果你的ajax没有问题，我只会在成功函数中加入我的一行。逻辑是，每次你点击一个项目，比如说项目id 1，ajax调用将是id 1的调用，如果你点击项目2，ajax调用将是id 2的调用。ajax是可以的。它将返回所有数据。只是当您单击所有框时，它们将不会有与其id关联的数据，而是与最后一项的id关联。使用$（“#“+id+”.box>.box content”）…，其他框保持为空，最后一个框已填充此代码理想情况下不会对每个列表项运行ajax多次。当您单击每个框时，会出现一个框，ajax将填充该框。当您再次单击链接时，不会发生任何情况。这些框不会消失，也不会重新填充或清空。。。