How to style an appended div with a click event? Jquery

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

Eli · Accepted Answer · 2011-04-25T14:34:05.823

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

edited Apr 25 '11 at 14:34

answered Apr 25 '11 at 14:28

Eli

17,397
4
36
49

Great, thank you very much. The other answers work but thanks for writing it all out and including what live does – TaylorMac Apr 25 '11 at 14:36
need `event.stopPropagation();` or clicking the .editable will also add a new .editable (unless that is intended). – James Montagne Apr 25 '11 at 14:36
@TaylorMac: no problem. @kingjiv: understood, but not going to assume ;) – Eli Apr 25 '11 at 14:37

score 0 · Answer 2 · answered Apr 25 '11 at 14:26

0

As the editable div is added dynamically you should use the following code:

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

All else is fine in your code

answered Apr 25 '11 at 14:26

neebz

11,465
7
47
64

live is overkill if an item with this class will only be added once. If multiple items with this class will be added then I agree, use live. – James Montagne Apr 25 '11 at 14:28
overkill? `live` is way better in terms of performance than plain `click`. see http://stackoverflow.com/questions/748076/using-live-benefits-similar-to-bind – neebz Apr 25 '11 at 14:30
If live is better than click for single elements then why would we ever use click? – James Montagne Apr 25 '11 at 14:35
you should'nt be using it at all. It's only there because it was part of the jQuery before `live` came out in the later versions. – neebz Apr 25 '11 at 14:38
@nEEbz, Then why wouldn't jquery just alias .click to call live("click")? I would like to see a link explaining this if you have one. The link you provided explains why live is better if you have many items you're matching, even if no others will be added. I cannot see how adding a handler to the body of your document that then checks to see which item is clicked is better than having a handler on the individual item itself. Either way you have one handler, the live way just makes the handler do more work and get executed more often. – James Montagne Apr 25 '11 at 14:42
the alias thing, ever heard of backward compatibility ? and it's better to go with `live` from now on. you may be thinking I am adding only one element dynamically right now but you never know what will happen in the future? And if you have two approaches to do the same thing, you go with the one which is better in long term. – neebz Apr 25 '11 at 14:46

James Montagne · Answer 3 · 2011-04-25T14:33:21.093

If I'm understanding correctly, the following should work:

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

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

EDIT: Need to add event.stopPropogation since the .editable is contained within the #right-sidebar. Otherwise clicking on .editable will add another .editable, which I assume is not intended.

How to style an appended div with a click event? Jquery

3 Answers3