From Scratch

jquery ajax results not ajaxy?

so you make your awesome ajax page which is going to pull in a nifty snippet of html, which will also have some ajax goodness in it. you test both pages independently and everything works great. then, you start pulling the second page in and find the events for the elements in the ajax result aren’t binding, or firing. why?

good question. the answer if you were using prototype would be to add a script=’true’ to your ajax request and whatever it brought in would work. but you’re not. so get over it.

this is a conceptual issue. the gain made by going to jquery (or one of them) over prototype is largely one of a cleaner implementation. by using event binding (rather than js sprinkles everywhere) you get to declare a bit of js for a link click in one place and one place only and it’s always there.

the downside to this is when you bring in new html elements through an ajax call, which, lets say contains a link with the id #generate, you would expect the code you wrote which triggers events for $(“a#generate”).click(function(){}); would fire right?

wrong. they won’t because the DOM was parsed once at ready and you brought them in after that. follow?

the answer is reasonably simple. use the livequery plugin. no really. use it. it will handle all the sex for you.

before you wrote this:

$("a#generate").click(function(){ //do something here });

now you write this:

$("a#generate").livequery('click', function(){ //do something here });

and thusly livequery will worry about binding and unbinding. gay, i know. but jquery is worth a bit of gay now and then.