Dynamically change the background-color of a dynamically created div using Jquery

Question

I have two sets of functions, one which changes the background-color of a div (a dynamically created div or one that already exists) and a second that adds new divs inside of divs which have the class="divplace".

The click events work like this: 1) Click the "button" with ID="background_color_button", and then on the div you want to change the background color to. or 2) Click the "button" with ID="clicker" to add a div inside of a div.

Here is the first:

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
        }
    }
}

And here is the second:

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("");
});

Here is the JSFiddle document:

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

My problem is that once you create a Div inside of a Div (With class="divplace") inside of a Div, you cannot change the color of that created Div without adding a new Div. I want to be able to create a limitless amount of Divs inside of Divs and always change their color without adding new Divs.

Thanks alot!

Taylor

Answer 1

After looking at the example, what I think your wanting to do is only perform the last action which you've selected (either color change or add div) and not both. If so, this will do it:

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

Basically, when one action is clicked the other is cleared. This way each click either changes the color or adds a div, but not both.

In addition there are lots of ways that your code could be improved. Particularly:

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

You are setting $currentDiv=null and then checking if it is null. It will always be null since you set it to null. Then you set it to something else, basically the =null and the if are pointless. This is equivilent:

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