Question

小提琴：

我有一个带有两个按钮的简单工具栏：

<!DOCTYPE html>
<html>
    <head>
        <title>oxxy task</title>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

        <script type="text/javascript" src="jsFile.js" ></script>
        <link rel="stylesheet" type="text/css" href="style.css">

        <script>
            $(function() {
                $("#toolbar").draggable();
            });
        </script>
        <script type="text/javascript" src="cP_v0.91/colorPicker.js"></script>
    </head>
    <body>
        <div id="toolbar">
            <p>Toolbar</p>
            <button class="buttons" id="buttonOne" type="button" onclick="appendButton();">createButton</button>
            <button class="buttons" id="buttonTwo" type="button" onclick="appendText();">createText</button>
        </div>
    </body>
</html>

这是我的css代码：

#toolbar { 
    width: 300px;
    background-color: gray;
    border-radius: 5px;
    padding-bottom:10px;
    padding-top:10px;
}

button{ 
    margin-left: 35px;
}

.ButtonClass{
    width: 120px;
    background-color: lightblue;
    border: solid;
    margin-top: 10px;
    margin-right: 10px;
    float: left;
    text-align:center;
    border-radius: 5px;
    border-width:2px;
}


.textClass{
    width: 120px;
    background-color: white;
    border: solid;
    margin-top: 10px;
    margin-right: 10px;
    float: left;
    background-color: lightgreen;
    text-align:center;
    border-radius: 5px;
    border-width:2px;
}

p{
    text-align:center;
    color: lightblue;
    margin-top:0px;
}

最后我的javascript函数：

function appendButton() {
    var popUpButton = document.createElement('div');
    popUpButton.className = 'ButtonClass';

    var message = document.createElement('a');
    message.innerHTML = 'Link';
    message.href = 'http://google.com';
    popUpButton.appendChild(message);
    document.body.appendChild(popUpButton);

    $(function() {
        $(".ButtonClass").draggable();
    });

}

function appendText() {
    var popUpButton = document.createElement('div');
    popUpButton.className = 'textClass';

    var message = document.createElement('div');
    message.innerHTML = "someText";
    popUpButton.appendChild(message);
    document.body.appendChild(popUpButton);
    $(".buttons").draggable();

    $(function() {
        $(".textClass").draggable();
        $(".textClass").dblclick(function() {

        });
    });

}

单击工具栏按钮时，我正在动态创建div元素。我的目标是当我双击一个要调用的颜色选择器来更改元素背景时创建这些元素。我正在使用colorPicker 0.91插件但不幸的是我不能使插件工作。如果有人能帮助我，我将不胜感激。谢谢

Answer 1

<强>小提琴：

<强> http://jsfiddle.net/fgPL6/3/

试试这个：

$(function() {
    $("#toolbar" ).draggable();
    $("body").on("dblclick",".ButtonClass",function(e){
        e.preventDefault();
        colorPicker(e);
    });
    $("body").on("dblclick",".textClass",function(e){
        e.preventDefault();
        colorPicker(e);
    })
});

在每个动态创建的元素上调用颜色选择器

1 个答案: