jquery - All event handlers fired Javascript loop -

i have set of circles in childcircles array. tried add listeners using nested functions. however, events fired , end getting last result.

var listenevents = function() { var toprow = document.getelementbyid('top-row'); var toprowbackground = document.getelementbyid('top-row-background'); var toprowicon = document.getelementbyid('top-row-icon'); var images = ["http://placehold.it/1920x50","http://placehold.it/1920x49","http://placehold.it/1919x50","http://placehold.it/1919x49","http://placehold.it/1920x48","http://placehold.it/1918x50"];  for(var = 0; < childcircle.length; i++) {     function inner(i) {         return function() {             console.log(event);             console.log(i);             toprowbackground.src = images[i];             toprowicon.src = $(childcircle[i]).children('img').attr("src");             console.log(toprowbackground.src);             console.log(toprowicon.src);             toprow.style.display = "block";         }     }      $(document).on('click', childcircle[i], inner(i)); } 

console message when 1 circle clicked:

mouseevent {}

0

http://placehold.it/1920x50

http://placehold.it/150x150

mouseevent {}

1

http://placehold.it/1920x49

http://placehold.it/150x150

mouseevent {}

2

http://placehold.it/1919x50

http://placehold.it/150x150

mouseevent {}

3

http://placehold.it/1919x49

http://placehold.it/150x150

mouseevent {}

4

http://placehold.it/1920x48

http://placehold.it/150x150

mouseevent {}

5

http://placehold.it/1918x50

http://placehold.it/150x150