Question

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

<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

Answer 1

您很可能使用错误的方式来分配事件。

所以你实际上正在分配事件，例如click，然后克隆它。但是事件仅针对原始输入进行了注册。因此，克隆人不知道如何处理它，因为它尚未被分配。

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

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

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

eyecon ColorPicker与jquery克隆

1 个答案: