Search code examples
javascriptjqueryhtmlcolor-picker

Call color picker on every dynamically created element

fiddle:

http://jsfiddle.net/fgPL6/1/

i have a simple toolbar with two buttons:

<!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>

Here is my css code:

#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;
}

And finally my javascript functions: 

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() {

        });
    });

}

I am dynamically creating div elements when clicking on the toolbar buttons. My goal is when those elements are created when i double click them a color picker to be called that changes the elements background. I am using colorPicker 0.91 plugin but unfortunetly i can not make the plugin work. I would appreciate if someone can help me. Thank you

Solution

  • Fiddle:

    http://jsfiddle.net/fgPL6/3/

    Try this:

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