What’s all this?
With the release of jQuery 1.3, one of the most exciting things (personally) is the introduction of the live event. What’s this, you ask?
How it used to be
It was impossible (or very very hard) to assign events to created items. If I were to use jQuery to create a paragraph, I would find it really difficult to try and interact with that – but jQuery 1.3 fixes this.
An Example
This is how I would create a paragraph normally in jQuery:
$("p").click(function(){
$(this).after("<p>Another paragraph!</p>");
});
If you were to run that code, then click on the new paragraph, nothing would happen. The reason why is complicated, but the way I think of it is that the new paragraph is floating around, being displayed but not in the code. So when it’s clicked on, jQuery does not realise it’s a paragraph. That’s not by any means exactly what happens, but it’s a way of explaining.
Problem solved!
And this is how we can do it with the new live event:
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
Run that code, and when you click on the new created paragraph, another one appears!
So there you go, an easy way to sort out one of the problems I’ve always had with jQuery. Any probs, leave a comment and I’ll get back to you!
The code display is mucked up
It’s the right code, but just displaying a bit funny.
Thanks for posting
Fixed the code… It’s all good now!
Great news!
Been doing something in work today and had a problem of interacting with an appended element. This should easily solve any future problems and make less code!
The new Live Elements are really cool. Just this little effort and life is much easier!
I think the complex explanation you’re talking about is rather simple:
Right at the moment
$("p").click()is fired it searches for all p-Elements and binds/adds an event to these (triggering the event results e.g. in calling a function).The function does whatsoever.
If you add an other p-Element afterwards there is nothing in the system that links the previous action “bind function” to event of adding a new p-Element.
And that is usally wise because maybe you don’t want all the new p-Elements to be linked to the function.
Nevertheless it is extremly usefull to be able to do that.
So long,
JT
Well the code looks very cool. Thanks!
You can find many funny photoshopped images and sometimes images not photoshopped with image original quality. How to find out whether the image is original or photoshopped picture ? Here is an online tool that let you to find if the image has gone under some digital manipulation: Photoshopped Image Killer.