Javascript 如何动态更改div'；由jquery创建后的颜色是什么？

我最初尝试使用jQuery的.css（）执行此任务，但失败了。我试过几种方法，但都失败了。我更愿意学习如何使用jquery的库来执行这个函数。jQuery UI用于可拖动和可调整大小的UI

我当前的代码：

<div id="p1"></div>

<link rel="stylesheet" href="script\jquery-ui-1.10.3.smoothness\css\smoothness\jquery-ui-1.10.3.custom.min.css" />
<script src="script/jquery-1.10.1.min.js"></script>
<script src="script/jquery-ui-1.10.3/ui/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript">
counter = 0;
$(function() {        
    $(document).on("click",'#addNewCo',function(e){
        e.preventDefault();
        var newCo = $('<div class="note" id="note'+counter+'" onclick="changecolor("note'+counter+'","EB0955")">note</div>').draggable({ scroll: true, scrollSpeed: 100 }).resizable();
        $('#area').append(newCo);
    });
});
function changecolor(id,color) {
    document.getElementById(id).style.backgroundColor = '#'+color;
}
</script>
<a id="addNewCo" href="javascript:void(0);"><button>New Note</button></a>
<div id="area"></div>

计数器=0；
$（函数（）{
$（文档）。在（“单击”上，“#添加新公司”，函数（e）{
e、 预防默认值（）；
var newCo=$（'note'）.draggable（{scroll:true，scrollSpeed:100}）.resizeable（）；
$（'面积'）。追加（新公司）；
});
});
函数changecolor（id、颜色）{
document.getElementById（id）.style.backgroundColor='#'+color；
}

不要对新元素使用内联JavaScript，请使用

.on（）

像在代码的另一部分中那样进行委派。尝试：

$(function () {
    $(document).on("click", '#addNewCo', function (e) {
        e.preventDefault();
        var newCo = $('<div class="note" id="note' + counter + '")">note</div>').draggable({
            scroll: true,
            scrollSpeed: 100
        }).resizable();
        $('#area').append(newCo);
        counter++;
    });
    $(document).on("click", '.note', function () {
        changecolor($(this).attr('id'), 'EB0955');
    });
});

你能行

$(function() {        
$(document).on("click",'#addNewCo',function(e){
    e.preventDefault();
    var newCo = $('<div class="note">note</div>').draggable({ scroll: true, scrollSpeed: 100 }).resizable();
    $('#area').append(newCo);
});
$("#area").on("click",".note",function(){
     $(this).css("background","#EB0955");
});
});    

$（函数（）{
$（文档）。在（“单击”上，“#添加新公司”，函数（e）{
e、 预防默认值（）；
var newCo=$（'note'）.draggable（{scroll:true，scrollSpeed:100}）.resizeable（）；
$（'面积'）。追加（新公司）；
});
$（“#区域”）。在（“单击”，“注意”，函数（）上）{
$（this.css（“背景”，“#EB0955”）；
});
});    

这里有另一个解决方案：

此解决方案在创建元素时调用绑定函数

$(function() {   
counter = 0;
$('#addNewCo').click(function(){
    var newCo = $('<div class="note" id="note'+counter+'" >note</div>');
    $('#area').append(newCo);
    nbind('#note'+counter);
    counter += 1;
    return false;
});
function changecolor(obj, color) {
    var colour = "#"+color;
    obj.css("background", colour);
}
function nbind(arg) {
    $(arg).bind('click', function() {
        changecolor($(this), "EB0955");
    });   
}
});

$（函数（）{
计数器=0；
$（'#addNewCo'）。单击（函数（）{
var newCo=$（‘注释’）；
$（'面积'）。追加（新公司）；
nbind（注+计数器）；
计数器+=1；
返回false；
});
功能更改颜色（obj，颜色）{
var color=“#”+颜色；
对象css（“背景”，颜色）；
}
函数nbind（arg）{
$（arg）.bind（'click'，function（）{
changecolor（$（此），“EB0955”）；
});   
}
});

试试这个，也许它会有帮助：

HTML:

---

这是。

这肯定与引号中的引号有关。（）JQuery并不总是比JavaScript好，JS在创建元素和提供样式方面要容易得多<代码>var div=document.createElement（“div”）；div.style.color=“#cccc”请不要在问题标题中添加“[已解决]”。如果您的问题已被回答，请单击其旁边的复选标记，将其标记为已接受的答案。

$(function() {   
counter = 0;
$('#addNewCo').click(function(){
    var newCo = $('<div class="note" id="note'+counter+'" >note</div>');
    $('#area').append(newCo);
    nbind('#note'+counter);
    counter += 1;
    return false;
});
function changecolor(obj, color) {
    var colour = "#"+color;
    obj.css("background", colour);
}
function nbind(arg) {
    $(arg).bind('click', function() {
        changecolor($(this), "EB0955");
    });   
}
});

<a id="addNewCo" href="javascript:void(0);"><button>New Note</button></a>
<div id="area"></div>

counter = 0;
$('#addNewCo').click(function(e) {
    e.preventDefault();
    var newCo = $('<div />', {
                    class: 'note',
                    id: 'note' + counter,
                    click: function() {
                        $(this).css('background', '#EB0955');
                    }
                });
    newCo.draggable({ scroll: true, scrollSpeed: 100 }).resizable();

    $('#area').append(newCo);
});

.note {
    background: yellow;
    width: 50px;
    height: 50px;
}