CODEWITHSUNDEEP
javascriptjqueryhtml
Dan Andreasson
Dan Andreasson

Reputation: 16232

Clone not working as intended

This code should in my mind make a clone of the element #loaded_start_container and put the clone into #content-wrapper with all its children.

This however creates a clone, but none of the children. If I just move the element without cloning, it works. 

var loaded_content = $('#loaded_start_container').clone().attr('id', 'content_start');
$('#content-wrapper').html(loaded_content);

JQuery 2.0.3

Edit. Added entire Js

$(function(){
    var time_before_load = new Date().getTime();
    loadContent('start', function(){
        console.log('Now start IS loaded. Evidence ');
        console.log($('#loaded_start_container'));
        changeContent('start');
        loadContent('projects', function(){
            loadContent('about', function(){
                  console.log('All content has been loaded. It took '+ (new Date().getTime() - time_before_load) + ' miliseconds');
            });
        });
    });

    $('nav ul li').bind('click', function(){
        $('.active_content').removeClass('active_content');
        var clicked = $(this).addClass('active_content').attr('id');
        changeContent(clicked);
    });

});


changeContent = function(source) {
    console.log('Changed to ' + source);
    var loaded_content = $('#loaded_'+source+'_container').clone().attr('id', 'content_'+source);
    $('#content-wrapper').html(loaded_content);
};
loadContent = function(source, callback) {
    $('#loaded_'+source+'_container').load(source + '.html', callback());
};

Upvotes: 1

Views: 88

Answers (1)

khollenbeck
khollenbeck

Reputation: 16167

This will do it:

var loaded_content = $('#loaded_start_container').clone().attr('id', 'content_start');
$('#content-wrapper').append(loaded_content );

Fiddle Example:

http://jsfiddle.net/88SLA/4/

.html() works .. but replaces existing content. See here:

http://jsfiddle.net/88SLA/5/

Upvotes: 2

Related Questions