Question

我对此功能有疑问：

$("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
})

var $currentInput = null;
$("#background_color_button").live("click", function() {
    $currentInput = null;
    if ($currentInput == null) {
        $currentInput = $(this).prev();
        $("label").html($currentInput.attr("id"));
    }
});
var editid;
$("div.editable").click(function(e) {
    e.stopPropagation();
    if ($currentInput == null)
        return;      
    var css = GetCssProperties();    
    $(this).css(css);
    $("label").html("");
});

function GetCssProperties() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();
    if ($currentInput.attr("id") == "background-color") {
        return {
        "background-color": value
        }
    }
}

它允许您使用“可编辑”类更改div的背景颜色

首先，您点击ID为“#background_color_button”的div，它将检索其上方输入的文本的值，然后单击您想要样式的div（使用class =“editable”）适用于。

我的问题在这里：

$("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
})

此函数在ID =“contentdiv”的div内创建一个div =“editable”的div。

但是，尽管它具有class =“editable”，但是单击ID =“background_color_button”的div然后在动态创建的div上将不会导致样式更改，就像使用jQuery动态加载的div一样。

我知道你可以使用：

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

或

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

要做到这一点，但是当我尝试放线时：

.delegate('.editable', 'click', function() {

或

$(".editable").live("click", function() {

取代：

$("div.editable").click(function(e) {

该功能不再有效。

非常感谢您提前，

泰勒

这是一个带有项目的JSfiddle文档：

http://jsfiddle.net/TSM_mac/gJLSd/1/

Answer 1

这是因为你在#contentdiv div中追加，事件没有冒泡。

所以如果你改变了html：

<div id="contentdiv">Click here to make a div</div>

到此：

<div id="contentdiv"><span id='clicker'>Click here to make a div</span></div>

然后来自：

的js

$("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
}) 

...
...

$("div.editable").click(function(e) {
     //blah blah blah
});

到此：

$("#clicker").click(function() {
    $(this).parent().append("<div class='editable'>For some reason this div cannot be colored</div>");
})

...
...

$("div.editable").live("click",function(e) {
     //blah blah blah
});

一切正常！

如何在此函数中使用JQuery为动态创建的div设置样式？

1 个答案: