如何使用click事件设置附加div的样式？ jQuery的

Question

这是起作用的功能：

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

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

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

*/

它将在div内部添加一个id为“ right-sidebar”的div，其背景颜色为红色。

但我希望有两个不同的点击事件。 一个附加内部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

随着可编辑div的动态添加，您应该使用以下代码：

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

其他一切在您的代码中都可以

Answer 3

如果我正确理解，则应该可以进行以下操作：

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

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

编辑：由于.editable包含在＃right-sidebar中，因此需要添加event.stopPropogation。 否则，单击.editable将添加另一个.editable，我认为这不是故意的。