javascript - 动态元素正在占用上次单击元素的数据

Question

我正在尝试将 ajax 获取的数据添加到使用 jquery 动态添加到 DOM 的元素中。这些元素具有相同的类但不同的 ID。它们是通过“点击”事件添加的。一切正常。问题是所有附加元素都显示由最后单击元素的 ID 获取的数据。 我不确定如何在 jsfiddle 中演示这一点，但这是我在说什么的一个想法 HTML:

<li class="options" id="1">Item 1</li>
<li class="options" id="2">Item 2</li>
<li class="options" id="3">Item 3</li>
<br/>
<div class="boxes"></div>

JS:

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

这是jsfiddle中的例子

https://jsfiddle.net/pkgf7enj/11/

假设接收到的数据等于ID。即，如果单击元素 1，则返回的数据(通过 ajax)为 1，如果单击元素 2，则返回 2，等等。

现在，如果我单击元素 1，则会附加带有“1”的框。如果我单击元素 2，则会附加框 2，但框 1 和框 2 的值都是 2(最后单击的元素)。如果我然后单击 3，则 3 个框将有 3.

我该如何解决这个问题？有人请

Answer 1

当我运行你的 fiddle 时，只要添加一点小东西，它就会在每个框中发布正确的 ID。但是，您的 fiddle 代码中有一个错误。您的代码如下:

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

我更新它以在每个红色框中显示 id:

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

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

独特的第一次迭代

 $('.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

希望对你有帮助