You can't call jQuery from JSP code, only from JavaScript.
Your JSP code *generates* JavaScript code, which is what actually calls
jQuery.
In your JSP code, the loop is run in JSP, and it generates a separate block
of JavaScript code each time through the loop. Here is the actual JavaScript
code it generates:
$('#image1').bind('mouseover',function(event) {
$('#image1').addClass('dim');
});
$('#image2').bind('mouseover',function(event) {
$('#image2').addClass('dim');
});
$('#image3').bind('mouseover',function(event) {
$('#image3').addClass('dim');
});
$('#image4').bind('mouseover',function(event) {
$('#image4').addClass('dim');
});
You can see why that code works as expected, since each of the four blocks
is completely self-contained and references the element ID you want it to
use.
The JavaScript code is a different story:
for (i = 1; i < 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
$('#thumb' + i).addClass('dim');
});
}
Now you're running the loop *in JavaScript*. When you call .bind() each time
through the loop, the variable "i" has the value you expect, 1 through 4 as
you go through the loop.
When this loop terminates, "i" has the value 5.
Much later, when you move the mouse over one of your elements, the event
callback function is called. What is the value of "i" now? 5. There's only a
single variable called "i", and it only contains one value at a time, and
when the loop is finished that value is 5.
Here are a couple of ways to fix it. One is to use a closure:
for (i = 1; i < 5; i++)
setThumbMouseover( i );
function setThumbMouseover( i ) {
$('#thumb' + i).bind('mouseover',function(event) {
$('#thumb' + i).addClass('dim');
});
}
This code is almost identical to the original, but by calling a function
each time through the loop, those function calls each have their own local
variable named "i". The value of each of those variables is preserved when
the event handler is called later.
Note that the name "i" inside the function is unrelated to the name "i"
outside it. The code would work the same like this:
for (i = 1; i < 5; i++)
setThumbMouseover( i );
function setThumbMouseover( n ) {
$('#thumb' + n).bind('mouseover',function(event) {
$('#thumb' + n).addClass('dim');
});
}
Either way, this is a great general purpose solution for a lot of similar
problems.
In this particular case, you also have the option of using a simpler
approach. In the event callback, "this" is a reference to the specific
element receiving the event. So you can code it like so:
for (i = 1; i < 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
$(this).addClass('dim');
});
}
Now there is no longer a reference to the "i" variable in the event
callback, so you avoid the problem completely.
-Mike
> From: kali
>
> yes I know they are two different things, I do know both JSP
> and JavaScript, so I do know the difference; I would like to
> know why what works in JSP doesn't work in JavaScript.. again:
>
> this works in JSP:
>
> <% 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');
> });
> }
>
> in JavaScript this code is applied ONLY when i=5, in JSP it
> applies to all four elements processed in the array and works
> as expected....
>
> ok, to make it easier, forget the comparison to JSP... why does
> above JavaScript code not work?? I create four elements
> dynamically, but event-binding does not work for any of the
> four elements...
>
> thank you...
>
>
>
> On Aug 28, 6:56 pm, James <james.gp....@gmail.com> wrote:
> > I have difficulties understanding what you're trying to achieve.
> > As someone mentioned, Java is to Javascript as Ham is to Hamster.
> > They're two different beasts.
> >
> > For the 'elem+1' situation, you can do:
> > this['elem'+1] = '...';
> > to dynamically create variables. But usually you don't have
> to resort
> > to doing something like that if you code things properly.
> >
> > On Aug 28, 12:44 pm, kali <maya778...@yahoo.com> wrote:
> >
> > > hi,
> >
> > > I have a problem with binding events to dynamically-generated
> > > elements; specif. problem is something I'm trying to do with
> > > JavaScript doesn't work but it works if I do it inJSP:
> (and can we
> > > PLEASE get ability to display CODE in this forum in
> NON-PROPORTIONAL
> > > FONT???)
> >
> > >JSP, event-binding works:
> > > ------------------------
> >
> > > <% for (int i = 1; i < 5; i++) { %>
> > > var elem<%=i%> = $('<a id="link<%=i%>"><img
> > > id="image<%=i %>" /></a>');
> >
> > >
> $('#image<%=i%>').bind('mouseover',function(event) {
> > > $('#image<%=i%>').addClass('dim');
> > > });
> > > }
> >
> > > JavaScript, event-binding does not work:
> > > ---------------------------------------
> >
> > > for (i = 1; i < 5; i++) {
> >
> > > var elem = $('<a id="link<%=i%>"><img id="image<%=i%>" /
> >
> > > ></a>');
> >
> > > $('#thumb' + i).bind('mouseover',function(event) {
> > > $('#thumb' + i).addClass('dim');
> > > });
> >
> > > }
> >
> > > (also: this declaration doesn't work in JS:
> >
> > > var elem+i = $('<a id="link<%=i%>"><img id="image<%=i%>" /></a>');
> >
> > > ^^^^^^
> >
> > > 'elem+i' returns a syntax error; why does this declaration 'var
> > > elem< %=i%>' work inJSPbut equivalent does not in JS?
> >
> > > urls (JSPand JS) are here:
> >
> >
> >http://www.mayacove.com/dev/jquery/events/test_event_dyn.html
> http://w...
> >
> > > thank you very much..
>
