Динамически изменить цвет фона динамически созданного div с помощью Jquery

Question

У меня есть два набора функций: , который изменяет цвет фона div (динамически создаваемый div или уже существующий) , а второй добавляет новые div внутри div. которые имеют класс = "divplace".

События нажатия работают следующим образом: 1) Нажмите «кнопку» с ID = «background_color_button», а затем в div, на который вы хотите изменить цвет фона. или 2) Нажмите «кнопку» с ID = «clicker», чтобы добавить div внутри div.

Вот первый:

var $currentInput = null;

$("#background_color_button").live("click", function() {
    $currentInput = null;
    if ($currentInput == null) {
        $currentInput = $(this).prev();
        $("label").html($currentInput.attr("id"));
    }
});


var editid;
$("div.editable").live("click",function(e) {
    e.stopPropagation();
    if ($currentInput == null)
        return;      
    var css = GetCssProperties();    
    $(this).css(css);
    $("label").html("");
});

function GetCssProperties() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();

    if ($currentInput.attr("id") == "background-color") {
        return {
        "background-color": value
        }
    }
}

Ивот второй:

var $currentDiv = null;
$("#clicker").live("click", function() {
    $currentDiv = null;
    if ($currentDiv == null) {
        $currentDiv = $(this).prev();
        $("label").html($currentDiv.attr("id"));
    }
});


var editid;
$(".divplace").live("click",function(e) {
    e.stopPropagation();
    if ($currentDiv == null)
        return;      
    var newdiv = "<div class='editable divplace'>The Div created inside of this div needs to be able to change the BG color without adding a new div</div>";   
    $(this).append(newdiv);
    $("label").html("");
});

Вот документ JSFiddle:

http://jsfiddle.net/TSM_mac/QYAB9/

Моя проблема в том, что когда вы создаете Div внутриDiv (с class = "divplace") внутри Div, вы не можете изменить цвет созданного Div без добавления нового Div.Я хочу иметь возможность создавать неограниченное количество Div внутри Div и всегда менять их цвет без добавления новых Div.

Большое спасибо!

Тейлор

Answer 1

После просмотра примера, я думаю, что вы хотите сделать только выполнить последнее выбранное вами действие (либо изменение цвета или добавление div), но не оба. Если так, это сделает это:

http://jsfiddle.net/QYAB9/3/

Как правило, при нажатии на одно действие другое очищается. Таким образом, каждый клик либо меняет цвет, либо добавляет div, но не оба.

Кроме того, существует множество способов улучшить ваш код. В частности:

$currentDiv = null;
if ($currentDiv == null) {
    $currentDiv = $(this).prev();
    $("label").html($currentDiv.attr("id"));
}

Вы устанавливаете $ currentDiv = null и затем проверяете, является ли оно нулевым. Он всегда будет нулевым, так как вы установите его на ноль. Затем вы устанавливаете его на что-то другое, в основном, = null и if бессмысленны. Это эквивалентно:

$currentDiv = $(this).prev();
$("label").html($currentDiv.attr("id"));