Question

我正在尝试将ajax-fetched数据添加到使用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

您可以在我的评论中看到我的更改

＆＃13;

//how to add the box to the DOM
$('li.options').click(function() {
 //insert var before id
  var  id = $(this).attr('id');
  //To be sure that it will display the good "id", i add the id value in the box content. You can remove it in your own code
  $('.boxes').append('<div class="box" id="'+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);
    }
  });
});

＆＃13;

li {
  cursor: pointer;
}

.box {
  background: red;
  height: 50px;
  width: 50px;
}

.box-content {
  width: 100%;
  height: 100%;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 2

当我操作你的小提琴时，只需添加一个小调，就会在每个方框中张贴正确的id。但是你的小提琴代码中有一个错误。您的代码为：

 $('.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命名每个目标框，这会导致多个具有相同ID的dom对象。当您通过id检索时，这可能会给您带来非常不规则的结果。如果您将代码更新为以下内容，那么当您第一次选择小提琴中的每个订单项时，目标框将具有唯一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

希望这有帮助

动态元素从最后单击的元素中获取数据

2 个答案: