Keeping your elements alive using jQuery.live()
Posted on 17 June, 2009 at 18:43 PM
There are already 23 Comments
About the Show
Marc shows you how to use a function he discovered in jQuery called jQuery.live(). This allows you to set the function to not only current elements but also future elemnents, therefore all your page elements will stay live even after you have made an ajax call.
Method:
Instead of using the following function.
$("[id^=myid]").click(function(){$do="something";});
Use the jQuery.live function.
$("[id^=myid]").live("click", function(){$do="something";})
This will make sure that all future elemnts relating to the selector behave with the set function.
Links Related to this post:
Related Shows
- (32) EP 168 - A New Beginning
- (23) Wireframing over the shoulder
- (17) How to Create a Simple Wordpress Plugin
- (9) Example of creating hype before a product launch
- (21) How to Add Detail to a Design Element
User Comments
Rob MacKay 17 Jun, 2009 22:44:47 PM
Cool, never knew about the live function :) It was nice to see different targeting too! there are so many tuts around that just use standard ID and Class targeting, it was nice to see more thrown into the mix :)
I shall be watching this one a few times too :)
Foxinni 18 Jun, 2009 15:58:34 PM
That was cool Marc. I really don't utilize ajax enough. It's nothing short of killer.
Will be returning to this tut. Might redo something like this but with WordPress and PHP in mind.
Thanks M
Marc Perel 18 Jun, 2009 16:51:19 PM
@Rob - Yeah I think most people don't use this method. It's a lot more usefull than using ".className" and of course we can't duplicate id's so "#myid" wouldn't work in this specific instance.
@Foxinni - Thanks for dropping by mate, glad you found the tutorial useful.
@Taylor - Thanks mate, I had no idea that was the case.
Paul 18 Jun, 2009 17:58:07 PM
does the live plugin ( bit.ly/12NJvO) have and advantages over livequery (bit.ly/5K2i9)?
Marc Perel 18 Jun, 2009 18:03:18 PM
@Paul - Mate, I'm not sure. I just discovered .live() last week, so I thought I'd share it with everyone because I found it so useful. I'll have a look at the plugin though and let you know if I find it better/worse to use. However I generally steer away from plugins, I don't like including too many different scripts on my pages, dunno why, just not amped.
Dave Jones 18 Jun, 2009 18:30:26 PM
I never knew about this function. It is awesome and the number of potential applications are endless.
Thanks for the heads up on this, I'm sure to be using it all the time.
Craig Farrall 19 Jun, 2009 12:29:50 PM
Nice post Marc, I liked this one a lot, as I am trying to learn PHP and JQuery at the moment, this is ideal for me. So I vote more of the same ;)
Marc Perel 19 Jun, 2009 12:33:36 PM
@Craig - Thanks mate, don't worry I do plan on doing more of the same, it's really just a time issue. After July 7th I should have more time to focus on tutorial content
Rob 19 Jun, 2009 13:14:15 PM
Good tip, i've been using live for some time as I work on a number of projects which are only on one page and reload everything via ajax.
One question though, slightly off topic, can someone explain how this works exactly "[id^=fname-]"?
I presume it's something to do with looking for any id which contains the string fname, but i'd be interested to know exactly how it works.
Marc Perel 19 Jun, 2009 13:17:40 PM
@Rob - I see that it's quite an unknown, something I wasn't aware of, so I do plan on following up on the different selectors in my next tutorial, because there are a LOAD of ways to reference objects in jQuery...
Dave Jones 19 Jun, 2009 13:19:17 PM
@Rob - check out the attribute filters on docs.jquery.com/Selectors
alex 19 Jun, 2009 15:43:50 PM
I thoroughly enjoyed it. What I liked about the style of your explanation is that you don't go straight into your new "discovery" but first show how you did it before. This way its more helpful as it better illustrates the advantage and provides for deeper understanding of how it fits in.
I am not doing much front end development at the moment but I will definitely remember this when i do. Thanks.
Marty 19 Jun, 2009 16:58:49 PM
This is so funny!!
I love jQuery AND ColdFusion, it's not often I find the two in online tutorials let alone see them in videos like a match made in heaven. It made my day.
Berry 19 Jun, 2009 17:35:54 PM
Whoa, didn't know about this one. I was always updating my clicks via scripts after loading in the AJAX content. This is gonna be really useful. Does this have any effect on the performance or memory usage of the page?
devilsansclue 19 Jun, 2009 19:13:12 PM
Very nice, I need to go rewrite some code, that does in one method what I did in about 40 lines of code....
Really though, the "meat" of the tutorial was about 3 minutes, the rest was coldfusion. The nice thing about jquery is that it is language agnostic, please please come with your server code pre prepared. not that I have any problem with coldfusion...
And seriously, great tut, and thanks
David Perel 19 Jun, 2009 19:42:06 PM
@Devilsansclue - Thanks for the comment and we are stoked you found value, its always cool to discover these little coding beauties!
With regards to the meat of the tut, we like to put things in context and you never know what people may find while watching Marc create the CF. We always tend to start with a blank page when doing our tuts.
But we appreciate the honest feedback, its something we will consider for our planned 'quick tips' which we hope to do next month.
Marc Perel 19 Jun, 2009 20:31:30 PM
@Marty - Glad you enjoyed the presence of ColdFusion ;) We push CF as much as we can, it's such a cool language to work with.
@Berry - Good question. Not anything that I can note, but coming to think about it I don't know what'd be worse? Re-calling functions time and time again, or just keeping the scope open for new elements as the site goes along...
@Devilsansclue - As David said, it's got to do with the context. There is nothing I hate more than a tutorial which is not put into context, it's a lot more difficult to learn if it's all up in the air.
It's also important to note how I've named and referenced the id's, since I don't think everyone knows how to use the [id^=] selector.
Thanks for watching btw, glad you found the jQuery useful ;)
Dave Jones 19 Jun, 2009 20:53:29 PM
I know absouletly zip about ColdFusion so from my perspective it was nice to see someone coding a CF site.
Although there are plenty of CF screencasts I wouldn't go and watch one since I'm not that into it. I am into jQuery though so this served a dual purpose for me. It's not going to convert me over to CF, but it's good to know about it.
Now if every 'tut' had 10 minutes of CF at the start then it would probably get tedious, but that's not what I have seen so far on FTC.
So keep it up you guys. I need all the inspiration I can get.
Jose Galdamez 23 Jun, 2009 21:52:26 PM
This was incredibly useful and fun to watch. The approach of going through the code line by line is better for going through an example such as this one. Too many times I've watched presentations live where the code was already written out. Whenever there is some complex logic, it doesn't help if the presenter zips through it too quickly. We use a mix of ColdFusion and PHP at our office. I think jQuery makes total sense when you don't want to depend wholly on CF's built-in AJAX features. Looking forward to seeing more on the topic.
Camilo 23 Aug, 2010 10:05:22 AM
You son of a gun!....just exactly what I was looking for..thank you so much for this vid..I would like to but you a coffee...lol
Drop a Comment
2010 © Obox Design
From the Couch is powered by OCMX Live
Contact us on +27 21 791 0292
Jon Thomas 17 Jun, 2009 20:58:10 PM
this is also handy if you're building html on the fly with jquery as well. not sure if my example below will show up.
$ ('button') . live ('click' function(){ $ (this) . append(aVariableWithHTML); });