我想在用户点击链接时添加colorpickerfield。问题是,只有第一个颜色选择器正在工作。我不知道为什么它不起作用,因为有一些错误
这是我的代码:
<script>
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() +1;
$('#addScnt').live('click', function() {
if( i <= 10 ){
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="add new category" /></label> <a href="#" id="remScnt">[ - ]</a> | bar color: </p><input name="color'+ i +'" " class="cPicker" id="colorpickerField'+ i +'" type="text" value="00ff00" size="6" maxlength="6" />').appendTo(scntDiv);
i++;
return false;
}
});
$('#remScnt').live('click', function() {
if( i > 2 ){
$(this).parents('p').remove();
i--;
$("#colorpickerField"+i).remove();
console.log("#colorpickerField"+i);
}
return false;
});
});
$(function(){
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
$(el).css({'background-color' : '#'+hex});
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
});
</script>
这里是html部分:
<form method="post" name="lineForm" action="<?php echo $_SERVER['PHP_SELF'].'?file=settings&t=diagramm'; ?>" >
<div class="addCatsContainer" id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="p_scnt" size="20" name="p_scnt" value="<?php $_POST['p_scnt']; ?>" placeholder="add new category" />
</label><a href="#" id="addScnt">[+]</a> <span class="barColor">| bar color:</span>
</p>
<input class="cPicker" id="colorpickerField1" name="color" type="text" value="00ff00" value="<?php $_POST['color']; ?>" size="6" maxlength="6" />
</div>
<div style="clear:both;"></div>
<input type="submit" name="submit" value="save" />
</form>
是的,有人能帮帮我吗?
感谢
更新:
当重复以下行时,它会起作用。
<input class="cPicker" id="colorpickerField1" name="color" type="text" value="00ff00" value="<?php $_POST['color']; ?>" size="6" maxlength="6" />
当使用jquery渲染输入字段时,它只是不起作用。