What you're looking for is called a closure. Read up on them - they are one
of the most useful features in JavaScript. Closures aren't specific to
jQuery - you can use them in any JavaScript code - but jQuery code tends to
make good use of them.
For your code, I assume that "photo" is an array of objects, each one with
id and src properties, and that "imgselect" is a function that expects an id
argument. Is that correct?
If so, then this code may be close to what you need:
$.each( photo, function( i, pho ) {
var $img = $('<img>')
.attr( 'src', pho.url )
.click( function() { imgselect( pho.id ); } )
$('#photoholder').append( $img );
});
-Mike
> I was wondering if there are ways to pass variables of
> non-global scope to callback function like in the situation
> below. I've run into this situation before and imagine it
> comes up often. So passing the photo[i]['id'] variable to
> imgselect is the issue here since at the time the event is
> triggered, it does not have the same value as it would at the
> time of binding.
>
> for (i=0;i<photo.length;i++) {
> var newimg = document.createElement('img');
> $(newimg).attr('src',photo[i]['url']);
> $(newimg).bind("click", imgselect(photo[i]['id']));
>
> $('#photoholder').append(imgdiv);
> }
>
