> > From: Michael Geary
> > Then, instead of binding event handlers to all of the individual
> > buttons, just bind a single event handler to the parent form:
> >
> > $('#order_form').click( function( event ) {
> > var $target = $(event.target);
> > if( $target.is('img.increment') ) return change( 1 );
> > if( $target.is('img.decrement') ) return change( -1 );
> >
> > function change( by ) {
> > var $qty = $target.parent('td').find('[EMAIL PROTECTED]');
> > var n = +$qty.val() + by;
> > if( n >= 0 ) $qty.val( n );
> > return false;
> > }
> > });
> From: Dan Eastwell
>
> That is genius Mike, I'm extremely grateful.
>
> It worked perfectly - even with adding my images using
> jquery, the total time was ~1.2 secs, which I see as
> acceptable for 1000 <input>s.
That's great, Dan. I was going to give you the usual "this is untested code"
warning, so I'm surprised and pleased that it worked out of the box. :-)
Handling events on a parent element works so well that it's one of the first
things I think of for cases like this. No reason to do something 1000 times
when 1 will do. :-)
> PS - if it's not too much trouble, could you explain /why/ it works?
> Especially the event.target selector, what's that? I didn't
> really get target from the documentation, and what's the
> 'event' parameter?
Sure. These two doc pages should explain it - give a shout back if you have
questions about them:
http://docs.jquery.com/Events
http://docs.jquery.com/Events_%28Guide%29
The one thing those pages don't explain is the whole concept of event
bubbling, but there are plenty of resources on that:
http://www.google.com/search?q=javascript+event+bubbling
For the purposes of this particular technique, though, you don't really need
to get into all the details of event bubbling - just note that you can
listen for an event either on the target element itself or on any parent of
that element.
-Mike
