eyecon ColorPicker with jquery Clone_问答_开发者

开发者 https://www.devze.com 2023-01-19 18:28 出处：网络

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 pre

相关专题：colors jquery

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').Col开发者_高级运维orPicker({
        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

Most likely you are using the incorrect way to assign it's events.

so you are actually assigning the event e.g.click and then cloning it. however the event is only registered for the original input. therefore the clone does not know what to do with it because it has not been assign.

you can use the live() method when assigning the events so it checks for future references.

u might need to also use die() before the live() to cancel previews instructions.

if the above does not make sense then post a sample of your code so we can try and re write it.