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

Question

I am trying to add ajax-fetched data into elements which are dynamically added to the DOM with jquery. The elements have the same class but different IDs. They are added by 'click' events. Everything works fine. The problem is all the appended elements display data fetched by the ID of the last clicked item. I'm not sure how I can demonstrate this in jsfiddle, but here is an idea of what I am talking about 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);
    }
  });
});

Here is the example in jsfiddle

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

Assume that the data received is equal to the ID. ie, if item 1 is clicked, the returned data (via ajax) is 1, if item 2 clicked, 2 is returned etc.

Now, if I click on item 1, box with '1' is appended. If I click on item 2, box 2 is appended, but both box 1 and 2 will have value 2 (last clicked item). If I then click on 3, the 3 boxes will have 3.

How can I solve this? Someone please

Answer 1

You can see my changes in my comments

 //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); } }); }); 

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

 <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> 

Answer 2

When I run your fiddle, with one minor addition, it posts the correct id in each box. However you have a bug in your fiddle code. Your code reads:

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

I updated it to display the id in each red box:

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

The bug in your code is that you are naming each target box with the same ID as the sourcing line item, which results in multiple dom objects with the same id. This can give you highly irregular results when you are retrieving by id. If you update your code to the following, then the first time you select each line item in your fiddle, the targeted boxes will have a unique id. If you are going to allow each line item to be clicked more than once, then you'll want to add an incremented singleton variable to keep the box id's all unique.

unique the first iteration

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

unique every iteration:

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

Hope this helps