Как стилизовать добавленный div с событием click?Jquery

Question

Вот функция, которая работает:

/*
$("#right-sidebar").click(function() {

    $(this).append("<div class='editable'>hello world</div>");

    $(".editable").css("background-color","red");
});

*/

Это добавит div внутри div с id "right-sidebar" с красным цветом фона.

Но яхочу, чтобы было два разных события клика.Один для добавления внутреннего div, а другой для его стилизации.

$("#right-sidebar").click(function() {
    $(this).append("<div class='editable'>hello world</div>");
});


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

Как мне поступить так?

Вот HTML-код:

<div id="right-sidebar">Content In Div</div>

С уважением, Тейлор

Answer 1

Вы можете либо связать клик после добавления, либо использовать привязку live, чтобы прослушать его заранее:

$("#right-sidebar").click(function() {
    $(this).append("<div class='editable'>hello world</div>");

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

// Or this:

$("#right-sidebar").click(function() {
    $(this).append("<div class='editable'>hello world</div>");
});


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

Вы также можете использовать делегирование событий, гораздо более предпочтительное:

$("#right-sidebar").click(function() {
    $(this).append("<div class='editable'>hello world</div>");
})
.delegate('.editable', 'click', function() {
    $(this).css("background-color","red");
});

Answer 2

Если я правильно понимаю, должно работать следующее:

$(function(){
    $("#right-sidebar").click(function() { 
       $(this).append("<div class='editable'>hello world</div>");

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

РЕДАКТИРОВАТЬ: Необходимо добавить event.stopPropogation, так как .editable содержится внутри # правой боковой панели. В противном случае нажатие на .editable добавит еще один .editable, который, я полагаю, не предназначен.

Answer 3

Поскольку редактируемый div добавляется динамически, вы должны использовать следующий код:

$(".editable").live("click", function () { //set as red });

Все остальное нормально в вашем коде