$jQuery Tree from json data ---> .live is killing me

Question

Hi, I'm trying to build a tree from json data, this data are loaded on demand from php files. My problem is that i can't find a way to get to lvl 3 ;). Here is my code:

        $(document).ready(function()
        {
        //Get the screen height and width
        var Height = $(document).height()/2;
        var Width = $(window).width()/2;

        $("#div1").hide();
        $("#div2").hide('slow');
        $.ajax(
        {
            type: 'post',
            async: true,
            url: "getparents.php",
            data: {'id' : 12200},
            dataType: "json",
            cache: false,
            beforeSend: function ()
            {
                //Show the Loading GIF at centered position
                $('#loading').css({'top': Height, 'left': Width}).show();
            },
            success: function(json_data)
            {
                $("#div1").empty().show();
                $('<ul class="parentContainer"></ul>').appendTo("#div1");
                $.each(json_data, function(key, object)
                {
                    $('<li id="node">'+object.name+'</li>').data('id', object.id).appendTo(".parentContainer");
                    if (object.childbool == true)
                    {
                        $('li:last').addClass('childfull')
                    }
                });
            },
            error: function ()
            {
                $('#loading').hide();
                alert('Something Went Wrong with the Loading please hit back in a minute');
            },
            complete: function ()
            {
                $('#loading').hide();
            }
        });

        function getChild(id, node)
        {
           $.ajax(
           {
                type: 'post',
                async: true,
                url: "getchilds.php",
                data: {'id' : id},
                dataType: "json",
                cache: false,
                beforeSend: function ()
                {
                    $('#loading').show();
                },
                success: function(json_data)
                {
                    $('<ul class="childContainer"></ul>').appendTo(node);
                    $.each(json_data, function(key, object)
                    {
                        $('<li id="node">'+object.name+'</li>').data('id', object.id).appendTo(".childContainer");
                        if (object.childbool == true)
                        {
                            $('li:last').addClass('childfull')
                        }
                    });
                },
                error: function ()
                {
                    $('#loading').hide();
                    alert('Something Went Wrong with the Loading please hit back in a minute');
                },
                complete: function()
                {
                    $('#loading').hide();
                }
            });
        }

        $("li.childfull, li.openchildfull").live('click',function()
        {     
            if ($('li.childfull'))
            {
                var node = $(this);
                var id= $(this).data('id');
                $(node).html(getChild(id, node));
                $(node).removeClass().addClass('openchildfull');
            }
            else
            {
                $(node).removeClass().addClass('childfull');
                $(node).children().remove();
            }
        });
    });

I think .live is killing me. I get my parents on load; when I click on one I get its children ALL pretty and well, but when I click on a child to get its children I get a very funny behavior. I get its children correctly indented but with no class="childfull" and I get an other copy of them not properly indented but with correct class.. I don't know what is going wrong... Any ideas/corrections are welcome.

P.S: You don't want me to describe to you what happens when I click on the messed up 3rd lvl childfull :P.

Answer 1

Instead of going through the headache of building your own tree, have a look at the jstree plugin. You can pass different formats to it, including json. It allows for complete customization and allows infinite(possible :p) child levels.