My apologies, Michael. For some reason, I wanted my example page to
actually work. :-)
The point at which I was trying to pass the event is at line 24 in the
"createPlayerLinkClickHandler" call. In my equivalent code here at the
office, I pass "event" (no quotes of course) as the first parameter
and then of course accept an event object in the definition of the
function.
IE and Safari don't show any errors but Firefox's Firebug plugin does.
It says that "event" doesn't exist.
*** You can do it very simply like this:
The first example you give shouldn't work since the "i" in the
definition of addPlayer would reference the last value of "i" from the
for loop at the time of the handler's execution, no?
*** You can write it more simply - and make it easier to read and
maintain -
with:
I normally don't do it like that... I was just trying to get something
out really quickly... but I would do it like that in the instances
where the main array is an array of arrays.
Thanks for all your suggestions. I'll take a look at all of them in
more depth to see whether I can integrate them into our solution.
-N
On Oct 29, 3:27 pm, Michael Geary <m...@mg.to> wrote:
> 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
> > athttp://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!
