actually got solution in another forum (http://www.manning-sandbox.com/ thread.jspa?threadID=34108&tstart=0)
works like a charm!! :) namely: $('#image' + i).bind('mouseover', i, function(event) { $('#image' + event.data).addClass('dim'); }); as to other problem (var elem1 = 'foo'; ) tried various things, like var thumbnails = [4]; // this is supposed to create an array of four elements; // thought I'd create an empty array of four elements, then put the elements inside it, but didn't work either.. for (i = 1; i < thumbnails.length; i++) { thumbnails.push($('<a id="link' + i + '"><img id="thumb' + i + '" / ></a>')); // thumbnails[i] = $('<a id="link' + i + '"><img id="thumb' + i + '" / ></a>'); but it turns out this was not source of the problem.. it's weird, actually that it works in HTML (client-side) with just 'elem' in that declaration....;) full working example here: http://www.mayacove.com/dev/jquery/events/test_event_dyn.html thank you very much... On Aug 30, 4:02 am, Josh Powell <seas...@gmail.com> wrote: > for (i = 1; i < 5; i++) { > $('#thumb' + i).bind('mouseover',function(event) { > $(this).addClass('dim'); > }); > } > > The 'i' you've called here is a global variable, in a for loop always > put a var in front of it to have local scope (to the function, not > block) > > for (var i = 1; i < 5; i++) { > $('#thumb' + i).bind('mouseover',function(event) { > $(this).addClass('dim'); > }); > } > > but... more importantly, reframe your thoughts on javascript/jquery > programming to let the selectors do the iteration for you. > > $('img[class="thumb"]).mouseover(function () { > $(this).addClass('dim'); > > }); > > To your second question: > > var elem<%=i%> = 'foo'; > > works becausejspis compiled server side and outputs the value of i > onto the page, so that if i is 1, then what the browser sees is > > var elem1 = 'foo'; > > which is valid javascript. But javascript is all done client side so > > var elem + i = 'foo'; > > is not valid. There are several ways to do what you want, none of > them good. Use implicit iteration from the jquery selectors instead. > Stop using id's when you have an unknown or changing number of items > you are iterating through to do things. IDs should only be used for > unique items. When you have a list of similiar items doing the same > thing, give them all the same class or custom attribute and let jQuery > do the iterating for you. > > Josh Powell > > On Aug 30, 12:37 am, "Michael Geary" <m...@mg.to> wrote: > > > Something I forgot to mention in my previous reply... To make sure it's > > clear what code is actually being run in the browser, never rely on looking > > at yourJSPsource to understand it. That's what threw you off here. The > > browser never sees yourJSPsource, only the HTML/JS/CSS/whatever files that > > yourJSPgenerates. > > > Do you have Fiddler? If not, go get it right now and get familiar with it: > > >http://www.fiddler2.com/ > > > It looks like you're using Windows 2000; Fiddler is supposed to run OK there > > if you have the .NET Framework 2.0. > > > Fiddler's inspectors are great for examining all of the actual data > > downloaded to your browser. You can of course use other tools such as the > > Web Developer Toolbar and even a View Source for the .html file. But Fiddler > > is terrific. > > > The main thing is that when you're debugging anything in the browser, you > > have to forget about theJSPsource and think only in terms of what the > > browser actually receives. > > > -Mike > > > > From: kali > > > > this works inJSP: > > > > <% for (int i = 1; i < 5; i++) { %> > > > $('#image<%=i%>').bind('mouseover',function(event) { > > > $('#image<%=i%>').addClass('dim'); > > > }); > > > <% } %> > > > > but the same thing, in JavaScript, doesn't work: > > > > for (i = 1; i < 5; i++) { > > > $('#thumb' + i).bind('mouseover',function(event) { > > > $('#thumb' + i).addClass('dim'); > > > }); > > > }