Question

这是有效的功能：

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

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

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

*/

它会在div中添加一个div，其id为“右侧边栏”，背景颜色为红色。

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

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

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

3 个答案: