对每个动态创建的元素调用颜色选择器
对每个动态创建的元素调用颜色选择器
提问于 2014-05-27 11:43:14
小提琴：
http://jsfiddle.net/fgPL6/1/
我有一个简单的工具栏，有两个按钮：
<!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插件，但不幸的是，我无法使插件工作。如果有人能帮我，我会很感激的。谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-28 08:59:34
Fiddle:
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);
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23888531
复制相关文章
相似问题
腾讯云开发者
