[jQuery] event-binding to dynamically created elements... (JSP vs JS problem......)

[kali]

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 in JSP:   (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%> = $('&lt;a id="link<%=i%>"&gt;&lt;img 
id="image<%=i
%>" /&gt;&lt;/a&gt;');

                $('#image<%=i%>').bind('mouseover',function(event) {
                                $('#image<%=i%>').addClass('dim');
                });
        }



JavaScript, event-binding does not work:
---------------------------------------

for (i = 1; i < 5; i++) {

  var elem = $('&lt;a id="link<%=i%>"&gt;&lt;img id="image<%=i%>" /
&gt;&lt;/a&gt;');

  $('#thumb' + i).bind('mouseover',function(event) {
     $('#thumb' + i).addClass('dim');
  });
}

(also: this declaration doesn't work in JS:

var elem+i = $('&lt;a id="link<%=i%>"&gt;&lt;img id="image<%=i%>" /
&gt;&lt;/a&gt;');
    ^^^^^^

'elem+i' returns a syntax error; why does this declaration 'var elem<
%=i%>' work in JSP but equivalent does not in JS?



urls (JSP and JS) are here:

http://www.mayacove.com/dev/jquery/events/test_event_dyn.html
http://www.mayacove.com/dev/jquery/events/test_event_dyn.jsp

thank you very much..