带有 jquery 克隆的 eyecon ColorPicker答案

【问题标题】：eyecon ColorPicker with jquery Clone带有 jquery 克隆的 eyecon ColorPicker
【发布时间】：2010-10-14 00:26:51
【问题描述】：

我正在尝试复制两个输入并将 Eyecon 颜色选择器添加到复制的输入。复制后，当我尝试单击输入添加选择一种颜色时，颜色将分配给前一个输入，而不是当前输入。谢谢。

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

这里有一个工作示例：link

【问题讨论】：

一个有效的例子？在哪里？您的链接将我带到要求我下载.zip 文件的页面。请在问题中发布代码。

标签： jquery colors

【解决方案1】：

很可能您使用了不正确的方式来分配它的事件。

所以你实际上是在分配事件，例如click，然后克隆它。但是，该事件仅针对原始输入注册。因此克隆不知道如何处理它，因为它还没有被分配。

您可以在分配事件时使用live() 方法，以便它检查未来的引用。

您可能还需要在live() 之前使用die() 来取消预览说明。

如果以上没有意义，请发布您的代码示例，以便我们尝试重新编写它。

【讨论】：

我在第一篇文章中添加了代码。我在克隆行时使用 live()。