Как стилизовать динамически созданный div с использованием JQuery в этой функции?

Question

У меня проблема с этой функцией:

$("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</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").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
        }
    }
}

Позволяет изменить цвет фона div с помощью класса "Editable"

FirstВы нажимаете на div с идентификатором "#background_color_button", и он извлекает значение ввода текста над ним, а затем вы нажимаете на div (с class = "editable"), к которому вы хотите применить стиль.

Моя проблема здесь:

$("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
})

Эта функция создает div с class = "editable" внутри div с ID = "contentdiv".

Однако,хотя у него есть class = "editable", нажатие на div с ID = "background_color_button", а затем на динамически создаваемый div не приведет к изменению стиля, как к div, которые НЕ загружаются динамически с помощью jQuery.

Я знаю, что вы можете использовать:

.delegate('.editable', 'click', function() {
    $(this).css("background-color","red");
});

или

$(".editable").live("click", function() {
    $(this).css("background-color","red");
});

Для этого, но когда я пытаюсь поставить строку:

.delegate('.editable', 'click', function() {

или

$(".editable").live("click", function() {

Вместо:

$("div.editable").click(function(e) {

Функция больше не работает.

Заранее большое спасибо,

Тейлор

Вот документ JSfiddle с проектом:

http://jsfiddle.net/TSM_mac/gJLSd/1/

Answer 1

Это потому, что вы добавляете в div #contentdiv, а события не всплывают.

Так что если вы измените html с этого:

<div id="contentdiv">Click here to make a div</div>

на это:

<div id="contentdiv"><span id='clicker'>Click here to make a div</span></div>

, а затем js от:

$("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
}) 

...
...

$("div.editable").click(function(e) {
     //blah blah blah
});

до этого:

$("#clicker").click(function() {
    $(this).parent().append("<div class='editable'>For some reason this div cannot be colored</div>");
})

...
...

$("div.editable").live("click",function(e) {
     //blah blah blah
});

Все работает!