javascript - AJAX returns previous value in array -

i'm making website host artwork. idea when page loads have javascript run php file makes query server names , ids of image files (artwork.jpg) , display them thumbnails on page.

when scroll on thumbnail, artwork displayed larger on different part of screen , description, specs, etc piece of art fades in. issue when make second ajax call appends value of moused on image screen , nothing until you've moused on @ least 2 images.

here's code first ajax call appends thumbnails page , creates form value of thumnbnail's id:

function getartdescriptions() {     $.post('../../path/to/script/get_art.php', function(json)     {        if (json.art.length > 0)         {              $.each(json.art,function()              {                     var info =                                    '<div class = "thumbnail_box">'                                 + '<img src = "images/thumbnails/'                                 + this['img']                                 + '"id = "'                                 + this['id']                                 + '"> '                                 + '<form id = "art_descriptions'                                 + this['id']                                 + '" '                                 + 'name = "art_descriptions'                                 + this['id']                                 + '">'                                 + '<input type = "hidden" id = "descriptions" name = "descriptions" value = "'                                 + this['id']                                 + '"></form>'                                 + '</div>';              });          }         }, 'json');  } 

and code i'm using make second ajax call giving me problem:

settimeout(function get_id() {      var tooltiptimeout;      $(".thumbnail_box img").on("mouseenter", function()     {         tooltiptimeout = settimeout(details(this.id),0);         console.log(this.id);      });     $(".thumbnail_box img").on("mouseleave", function()     {         hidetooltip();     });  function hidetooltip()     {         cleartimeout(tooltiptimeout);         $(".description").fadeout().remove();     } }, 800);    //grab descriptions database ,  function details(art) {     var formname = "#art_descriptions"+art;     var filename = '../../file/path/to/script/get_descriptions.php';      //console.log($(formname).serialize());      $(".thumbnail_box img").on("mouseenter", function()     {         $.post(filename, $(formname).serialize(), function(json)         {          if (json.descriptions.length > 0)          {           //make sure empty out div classes each tab              $(".description").empty();              $.each(json.descriptions,function()              {                     console.log("art method"+this['id']);                     $(".description").append(this['description']+this['id']).hide().fadein("fast");             });          }         }, 'json');     }); }; 

when console.log(this['id']) in get_id() method correct value displayed in console, when console.log("art method"+this['id'] in details method value equal scrolled on thumbnail's id. i'd appreciate insight on issue.

is use of settimeout()? code not run without specifying timeout method. example if load page , scroll on images id's 14 , 13, console display:

14  13   art method 14 

the issue appending more of same events. after first mouseenter event occurs details function called, appends mouseenter event. subsequent calls doing same thing. can see example of here: http://jsfiddle.net/6qre72fk/.

var counter = 0;  $('#container1').on('mouseenter', function(){   $('#container2').text('first mouseenter');     appendinganothermouseenter(); });  function appendinganothermouseenter(){   $('#container1').on('mouseenter', function(){     $('#container2').text(counter);     counter++;   }); } 

you can see how counter incremented several times due appended mouseenter events.