Hello. I'm trying to duplicate two inputs and add the Eyecon Color picker to duplicated inputs. After duplication, when i'm trying to click on the input add select a color, the color is assigned to the previous input, not to the current one. Thank you.
<link rel="stylesheet" href="ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="colorpicker.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.color').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
jQuery(el).val(hex);
jQuery(el).css('backgroundColor', '#' + hex);
jQuery(el).ColorPickerHide();
},
onBeforeShow: function () {
jQuery(this).ColorPickerSetColor(this.value);
}
});
jQuery(".cloneTableRows").live('click', function(){
var thisTableId = 'fontmanager';
var lastRow = jQuery('#'+thisTableId + " tr:first");
var newRow = lastRow.clone(true);
jQuery('#'+thisTableId).append(newRow);
jQuery('#'+thisTableId + " tr:last td:last span").css("visibility", "visible");
jQuery(newRow).find("input").each(function(){
if(jQuery(this).hasClass("color")){
jQuery(this).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
jQuery(el).val(hex);
jQuery(el).css('backgroundColor', '#' + hex);
jQuery(el).ColorPickerHide();
},
onBeforeShow: function () {
jQuery(this).ColorPickerSetColor(this.value);
}
});
}
});
return false;
});
jQuery(".delRow").click(function(){
jQuery(this).parents("tr").remove();
return false;
});
});
</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; }
.remove {color:#cc0000}
.input{ border: solid 1px #006699; padding:3px}
.x{width:50px;margin-right:10px;}
.y{width:50px;margin-right:10px;}
</style>
</head>
<body>
<table id="fontmanager">
<tr class="clone">
<td class="font_color"><input type="text" name="color1[]" class='color'/></td>
<td class="font_shadow"><input type="text" name="color2[]" class='color'/>
</td>
<td style="background-color:transparent !important; border-bottom:0px;border-right:0px !important;"><span class="delRow" style="visibility: hidden;">X</span></td>
</tr>
</tbody>
</table>
<p><a href="#" class="cloneTableRows">Add More</a></p>
A working example here: link