Question

Here is the function that works:

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

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

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

*/

It will append a div inside of the div with id “right-sidebar” with a background color of red.

But I want there to be two different click events. One to append the inner div, and one to style it.

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


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

How would I go about doing this?

Here is the HTML:

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

Regards,
Taylor

Answer 1

You can either bind the click after the appending, or use the live binding to listen for it in advance:

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

You can also use event delegation, much more preferred:

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