Захватить динамически добавленный контент

Полный код можно просмотреть на JSBin - http://jsbin.com/ecuraQEg/1/edit

Я работаю над экспериментальным дизайнером веб-сайта (редактор wysiwyg), и у меня проблемы.

Я хочу иметь возможность манипулировать divs, которые были нарисованы/добавлены, путем изменения его положения, цвета фона, границы, отступов и т. Д.:

Скажем, я нарисовал 3 divs со следующими цветами фона: красный, зеленый и синий.

Когда я нажимаю на красный div, я хочу, чтобы он отображал все его свойства, высоту, ширину, верх, левый, фон и т.д.: У меня уже есть ширина и высота вниз, но я не могу понять, как захватить другую стили.

Любая помощь приветствуется.

Ширина/высота DIVs захватываются следующим:

canvas.onmousemove = function(e) {
    if ($('select#tools option:selected').val() !== 'select') return;

    $('#canvas div').on('mousemove', function() {
        // Detects/Shows div size on specified element.
        $('#elm-width').val($(this).width().toString() + 'px');
        $('#elm-height').val($(this).height().toString() + 'px');
    });

    document.getSelection().removeAllRanges();
    $('#canvas div.rect').draggable();
    code.val(preview.html());
    coder.val(preview.html());
};

DIVs рисуются с использованием следующего JQuery/Javascript:

setMousePosition = function(e) {
  if ($('select#tools option:selected').val() !== 'div') return;
    var ev = e || window.event; //Moz || IE
    if (ev.pageX) { //Moz
        mouse.y = ev.pageY + window.pageYOffset;
        mouse.x = ev.pageX + window.pageXOffset;
    } else if (ev.clientX) { //IE
        mouse.y = ev.clientY + document.body.scrollTop;
        mouse.x = ev.clientX + document.body.scrollLeft;
    }
};

var mouse = {
    x: 0,
    y: 0,
    startX: 0,
    startY: 0
};
var element = null;

// Mouse Event Handlers
canvas.onmousemove = function(e) {
    if ($('select#tools option:selected').val() !== 'div') return;
    setMousePosition();
    if (element !== null) {
        element.style.position = $('select#position option:selected').val();
        element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
        element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
        element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
        element.style.margin = $('#elm-margin').val();
        element.style.padding = $('#elm-padding').val();
        element.style.color = $('#elm-color').val();
        element.style.border = $('#elm-border').val();
        element.style.borderRadius = $('#elm-border-radius').val();
        element.style.MozBorderRadius = $('#elm-border-radius').val();
        element.style.background = $('#elm-bgcolor').val();
        element.style.boxShadow = $('#elm-boxshadow').val();
        element.style.textShadow = $('#elm-txtshadow').val();
        element.style.overflow = 'auto';

        $('#elm-top').val(element.style.top);
        $('#elm-left').val(element.style.left);
        $('#elm-width').val(element.style.width);
        $('#elm-height').val(element.style.height);
    }
};

canvas.onmousedown = function(e) {
    if ($('select#tools option:selected').val() !== 'div') return;
    if (element !== null) {
        element = null;
        canvas.style.cursor = "default";
        console.log("finsihed.");
    } else {
        console.log("begun.");
        mouse.startY = mouse.y;
        mouse.startX = mouse.x;
        element = document.createElement('div');
        element.className = 'rect';
        element.style.top = mouse.y + 'px';
        element.style.left = mouse.x + 'px';
        canvas.appendChild(element);
        element.appendChild(document.createTextNode($('#insidediv').val()));
        canvas.style.cursor = "crosshair";
    }
};

canvas.onmouseup = function(e) {
    if ($('select#tools option:selected').val() !== 'div') return;
    element = null;
    canvas.style.cursor = "default";
    console.log("finsihed.");
    code.val(preview.html());
    coder.val(preview.html());
    $('.select-tool').trigger('click');
};