Jquery 如何使用单击事件设置附加div的样式？滑动分页

以下是起作用的函数：

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

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

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

*/

/*
$（“#右侧边栏”）。单击（函数（）{
$（this.append（“hello world”）；
$（“.editable”）.css（“背景色”、“红色”）；
});
*/

它将在id为“right sidebar”的div中附加一个div，背景颜色为红色

但我希望有两个不同的点击事件。一个用于附加内部div，另一个用于设置其样式

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


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

$（“#右侧边栏”）。单击（函数（）{
$（this.append（“hello world”）；
});
$（“.editable”）。单击（函数（）{
$（this.css（“背景色”、“红色”）；
});

我该怎么做呢

以下是HTML：

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

Div中的内容 问候,，

---

Taylor

动态添加可编辑div时，应使用以下代码：

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

---

代码中的所有其他内容都很好

如果我理解正确，以下内容应该可以工作：

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

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

$（函数（）{
$（“#右侧边栏”）。单击（函数（）{
$（this.append（“hello world”）；
$（“.editable”）。单击（函数（事件）{
event.stopPropagation（）；
$（this.css（“背景色”、“红色”）；
});
});
})

---

编辑：需要添加event.stopPropogation，因为.EDIT包含在#右侧边栏中。否则，单击.editable将添加另一个.editable，我认为这不是故意的。

您可以在添加后绑定单击，或者使用

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

$（“#右侧边栏”）。单击（函数（）{
$（this.append（“hello world”）；
$（“.editable”）。单击（函数（）{
$（this.css（“背景色”、“红色”）；
});
});    
//或者这个：
$（“#右侧边栏”）。单击（函数（）{
$（this.append（“hello world”）；
});
$（“.editable”）.live（“单击”，函数（）{
$（this.css（“背景色”、“红色”）；
});

您还可以使用事件委派，更可取的做法是：

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

$（“#右侧边栏”）。单击（函数（）{
$（this.append（“hello world”）；
})
.delegate（'.editable'，click'，function（）{
$（this.css（“背景色”、“红色”）；
});

live如果只添加一次具有此类的项目，那就太过分了。如果将添加多个此类项目，则我同意使用live.overkill

live

在性能方面比普通的

点击

要好得多。看看对于单个元素，live是否比click更好，那么我们为什么要使用click？你根本不应该使用它。它之所以存在，是因为它是jQuery的一部分，而在以后的版本中，

live

出现之前。@nEEbz，那么为什么jQuery不只是别名呢。单击调用live（“单击”）？我想看到一个链接解释这一点，如果你有一个。您提供的链接解释了为什么如果您有许多匹配的项目，即使没有其他项目添加，live也会更好。我看不出在文档主体中添加一个处理程序，然后检查单击了哪个项目，这比在单个项目本身上添加一个处理程序更好。无论哪种方式，您都有一个处理程序，实时方式只会让处理程序做更多的工作，并更频繁地执行。感谢您的捕获，@Matijs.Great，非常感谢。其他答案很有用，但感谢您将其全部写出来，包括live doesneed

event.stopPropagation（）

或单击.editable也将添加一个新的.editable（除非是有意的）。@TaylorMac:没问题@金吉夫：理解，但不会假设；）