find() working only once on AJAX result?
Hi, all I'm new to jQuery and I'm having a bit of a problem manipulating AJAX results with jQuery methods.
I use an AJAX get and execute the find() method on the resulting output. But this seems to work only once. Subsequent attempts using the same selector in the find() argument don't work. Different selectors will work, but again, only once.
There seems to be something going on when traversing the AJAX result?
-
$(document).ready(function() {
$.get('sections.htm', {}, function(data) {
var $response = $('<div />').html(data);
showContent("teaser", $response);
function showContent(nav, $response) {
loadContent(nav, $response);
loadSlimboxHack();
$('#content').fadeIn(400);
}
function loadContent(nav, $response) {
if (nav == 'teaser')
{
$('#content').html($response.find('.teaser'));
}
This works the first time, but if I try showContent(".teaser") again, it fails because it doesn't seem to find anything and so #content is overwritten with nothing. Its as if find excises the selectors from $response.
Similarly, if I added a different selector after the "used" selector, this again works for the new selector, but not the old one.
-
function loadContent(nav, $response) {
if (nav == 'teaser')
{
$('#content').html($response.find('.teaser'));
$('#content').appendl($response.find('.sketches'));
}
So '.teaser' doesn't get written to #content, but '.sketches', does. Afterwords '.sketches' will subsequently fail.
Take a look at my website to see...
http://www.shadowshapes.com/dev
Thanks for any help!