You mentioned not being able to pass the event object into your click
function, but I don't see the code where you tried to do that, so I don't
know what went wrong.
In any case, the function-returning-a-function is much more complicated than
you need. Risteli's code is on the right track, but it also doesn't show how
to handle the event object.
You can do it very simply like this:
for (var i = 0; i < arrPlayers.length; i++)
addPlayer( i );
function addPlayer( i ) {
// your existing $('body').append(...) goes here
$("#playerLink" + i).click( function( event ) {
$("#imgPlayer").attr( "src", "img/" + arrPlayers[i].photo );
event.stopPropagation();
}
}
Although personally I would get rid of all the "i" indexing and do it more
like this:
for( var i = 0; i < arrPlayers.length; i++ )
addPlayer( arrPlayers[i] );
function addPlayer( player ) {
$( '<p>' +
'<a href="#">' + player.name + '</a>' +
' is a ' + player.position + ' for the ' + player.team +
'</p>'
).appendTo('body')
.find('a').click( function( event ) {
$('#imgPlayer').attr( 'src', 'img/' + player.photo );
event.stopPropagation();
});
}
Or alternatively:
$.each( arrPlayers, function( i, player ) {
$( '<p>' +
'<a href="#">' + player.name + '</a>' +
' is a ' + player.position + ' for the ' + player.team +
'</p>'
).appendTo('body')
.find('a').click( function( event ) {
$('#imgPlayer').attr( 'src', 'img/' + player.photo );
event.stopPropagation();
});
});
This way I didn't even have to give the <a> tag an ID at all.
BTW, instead of event.stopPropagation(), you can simply return false from
the event handler. This automatically calls both .stopPropagation() and
.preventDefault(), which in many cases is what you want anyway.
Also a tip on creating your array. Any time you have code like this:
var array = new Array();
array[0] = FirstThing;
array[1] = SecondThing;
array[2] = ThirdThing;
You can write it more simply - and make it easier to read and maintain -
with:
var array = [
FirstThing,
SecondThing,
ThirdThing
];
Finally, you may notice I switched the double quotes to single quotes. This
makes it easy to use the correct double quotes in HTML attributes as in the
A tag: '<a href="#">'. Of course the browser will accept it either way, but
my "mental validation" flags code like href='#' as being invalid. :-)
-Mike
On Thu, Oct 29, 2009 at 9:29 AM, The alMIGHTY N <natle...@yahoo.com> wrote:
> Example page: http://jqueryfun.nathanielklee.com/eventFirefox.html
>
> Following one example provided in an official jQuery tutorial (located
> at http://docs.jquery.com/Tutorials:How_jQuery_Works), I can pass
> "event" into a function I define directly in the click assignment
> handler.
>
> e.g. $("#something").click(function(event) { event.preventDefault
> (); });
>
> However, if this is put into a for loop and modified to include a
> statement that requires a value of i from the for loop iteration, it
> won't work because when the handler is fired, it only knows the last
> iterative value of i.
>
> I get around that by instead making a call to a function that returns
> a function that executes the statements I want.
>
> e.g. $("#something").click(doSomething(i)); function doSomething(i)
> { return function() { alert(i) }; }
>
> So far, so good.
>
> The problem I run into is that I need to prevent the default behavior
> with event.preventDefault(). Browsers won't recognize if I pass
> "event" into the function even though the aforementioned tutorial
> indicates that one can indeed pass "event" into a function. How can I
> get around this problem?
>
> I realize that there are other ways I could do the same thing, such as
> applying a class to the links in question and referencing the event
> target (example below), but I'm interested in figuring out why the
> method I described above doesn't work and whether there's a way to get
> it to work.
>
> e.g. $("#something").click(doSomething); function doSomething(event)
> { alert($(event.target).attr("anAttribute")); }
>
> Thanks!
>
