2010-10-14 42 views
0

我想重复两个输入,并添加Eyecon颜色选择器重复输入。 重复后,当我试图点击输入添加选择一种颜色,颜色被分配到前一个输入,而不是当前的输入。 谢谢。eyecon ColorPicker与jquery克隆

<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

+0

一个可行的例子?哪里?您的链接将我带到一个页面,要求我下载一个'.zip'文件。请在问题中张贴代码。 – user113716 2010-10-14 00:33:14

回答

0

最有可能使用的是分配它的事件不正确的方法。

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

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

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

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

+0

我在第一篇文章中添加了代码。我在使用live()时克隆行。 – jasker 2010-10-14 09:13:06

+0

现在可以工作吗?还是有问题? – Val 2010-10-16 15:01:59