maya90 (36) [Avatar] Offline
#1
why does this book not cover event-binding for elements created DYNAMICALLY.....
this code does not work:

for (i = 1; i < 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
$('#thumb' + i).addClass('dim');
});
}

event-binding code is IGNORED, for all four elements.. what is the solution please..




thank you...
bear.bibeault (675) [Avatar] Offline
#2
Re: event-binding to dynamically created elements...
There is no difference whether the elements are created as part of the HTML markup, or created dynamically under script control. Once they are created, they become part of the DOM and are indistinguishable from all other elements.

Of course, you need to make sure that the elements actually exist before trying to bind event handlers to them. Under jQuery 1.2, for which the 1st edition of the book was written, you can't bind event handlers to elements that don't exist yet.

If you are using jQuery 1.3, you can use the .live() method to pro-actively bind event handlers, but under jQuery 1.2 you'll need to look into using the LiveQuery plugin -- which the book does cover.
maya90 (36) [Avatar] Offline
#3
Re: event-binding to dynamically created elements...
thank you for yr response..

yes the elements exist.. the images here are the elements in question..
http://www.mayacove.com/dev/jquery/events/test_event_dyn.html

this line works
$('#link' + i).attr('href', 'photos.jsp?pn=' + i);

but this doesn't...

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


I will certainly look into live() method, but I don't get why above .bind() doesn't work..

(btw, in JSP the event-binding works fine (img is supposed to dim a bit in opacity and links above imgs change font-color on mouseover..) for clarity, here is a SCREENSHOT of code in JSP, as it appears in my editor..
http://www.mayacove.com/dev/jquery/events/binding.gif

which is for this url:
http://www.mayacove.com/dev/jquery/events/test_event_dyn.jsp
as you can see, event-binding works fine (and I didn't use live() method.....smilie

why won't same code work in HTML, i.e., here?
http://www.mayacove.com/dev/jquery/events/test_event_dyn.html

thank you..
mraj (104) [Avatar] Offline
#4
Re: event-binding to dynamically created elements...
Hi maya90,
The problem is that "i" in the event handler is 5, since I believe Javascript is creating a closure and the i variable is staying around.

If you add this line of code:
$('#thumb' + i).bind('mouseover',function(event) {
alert("i=" + i);
$('#nav' + i).addClass('roll');
you will see that i equals 5, for every image you mouseover.

With your JSP version, since you put the "for" loop inside of the JSP delimiters, the code is repeated 4 times, and there is no "i" in the Javascript with the JSP version.

To pass the current value of i into the event handler, use the optional "data" argument to the event handler:
$('#thumb' + i).bind('mouseover', i, function(event) {
$('#nav' + event.data).addClass('roll');
$('#thumb' + event.data).addClass('dim');
maya90 (36) [Avatar] Offline
#5
Re: event-binding to dynamically created elements...
oh man.. this worked!! thank you so much.. don't quite understand this code yet (this way of doing it is not covered in ch4 of the book..) but well, I guess I can find sources where this is explained (event.data -- WHAT is this exactly -- the 'i' variable??)

thank you very very much..
bear.bibeault (675) [Avatar] Offline
#6
Re: event-binding to dynamically created elements...
Actually it is covered in the book. The data property of the Event instance is whatever you pass in as the data value of the bind() method. In this case, the code passed i. It could also be done less explicitly with closures.

By the way, because there have been many changes in jQuery with regards to event handling in jQuery 1.3 (and upcoming in jQuery 1.4), the events chapter in the 2nd edition of the book will have a lot of new examples that make data handling clearer.
maya90 (36) [Avatar] Offline
#7
Re: event-binding to dynamically created elements...
thank you very much Bear..


oh brother... so have to buy a new book?? I'm an unemployed web developer... I guess there's no "free upgrade..." smilie
(I'm using jQuery 1.2 precisely b/c that's what's used in the book I have..)

btw, it says here, http://jquery-howto.blogspot.com/2009/03/jquery-ui-171-released.html that jQuery 1.7 has been released!! is this the case?? (it says jQuery UI.. is that a special kind of jQuery?)

again, thank you for taking the time, I appreciate it...
bear.bibeault (675) [Avatar] Offline
#8
Re: event-binding to dynamically created elements...
If you are cash-strapped you might be able to learn what you need to know by downloading the 2nd edition's source code examples (when available) and comparing them to the 1st edition. But there will be a number of significant changes from jQuery 1.2 to 1.4.

jQuery UI is the UI Plugin to jQuery and has its own versioning scheme. It adds things like drag-and-drop to jQuery, and supplies a number of UI widgets (tabs, sliders, dialogs...)
maya90 (36) [Avatar] Offline
#9
Re: event-binding to dynamically created elements...
so is there a way to get notified when the new one comes out??

jQuery UI sounds very cool..

thanks again...
bear.bibeault (675) [Avatar] Offline
#10
Re: event-binding to dynamically created elements...
You can watch the progress of the 2nd edition on its web page:

http://manning.com/bibeault2/

You can even download some of the preliminary example code there.
maya90 (36) [Avatar] Offline
#11
Re: event-binding to dynamically created elements...
oh my gosh, I hate to tell you this, but this url you just posted,
http://manning.com/bibeault2/, looks totally messed up; I mean the layout, in both FF and IE (am on Windows 2000, can see only in IE 6, not IE 7, and in FF 3.0.5..)

top of pg (apart from header and sidebar), is empty, unless you scroll down, way down..
and in FF it's worse, there are elements on top of each other... (let me know if you want to see screenshots..)

sorry..... ;~) and thank you again for all your help..
bear.bibeault (675) [Avatar] Offline
#12
Re: event-binding to dynamically created elements...
Looks fine to me in Safari and Firefox.

Sounds like the CSS didn't download for you for some reason.