Question

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?

AJAX call…

    $.get('sections.htm', {}, function(data) {
        var $response = $('<div />').html(data);
        showContent("teaser");

        function showContent(nav) {
            loadContent(nav);
            loadSlimboxHack();
            $('#content').fadeIn(400);
        }

Find element …

    function loadContent(nav) {
        if (nav == 'teaser')
        {
            $('#content').html($response.find('.teaser'));
        }

This works, but if I try showContent(".teaser") again, it fails because it doesn’t seem to find anything and so #content is overwritten with nothing.

Take a look at my website to see…

http://www.shadowshapes.com/dev

Answer 1

@redsquare,
Thanks very much! That put me on the right path.

For the uninitiated, append() acts like a ‘move’ instead of a ‘copy’ in a single selector context. Apparently its a common mistake among newbies. And its not quite documented? I don’t feel so bad now! 🙂

http://www.nabble.com/Undocumented-move-copy-behavior-of-append%28%29-et-al.-ts21179461s27240.html#a24146606

So I needed to use clone() in addition to append() in this case.

$('#content').append($response.find('div.concept' + tag).clone());

Great! Problem solved!