eyecon ColorPicker с jquery Clone

Я пытаюсь дублировать два входа и добавлять Eyecon Color picker к дублированным входам. После дублирования, когда я пытаюсь щелкнуть по вводу, добавьте цвет, цвет присваивается предыдущему входу, а не текущему. Спасибо.eyecon ColorPicker с jquery Clone

<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

источник

2010-10-14 jasker

Рабочий пример? Где? Ваша ссылка приводит меня на страницу с просьбой загрузить файл '.zip'. Пожалуйста, отправьте код в вопросе. – user113716

Скорее всего, вы используете неправильный путь, чтобы назначить его события.

так что вы фактически назначаете событие, например. click, а затем клонирование. однако событие регистрируется только для исходного ввода. поэтому клон не знает, что с ним делать, потому что он не был назначен.

вы можете использовать метод live() при назначении событий, чтобы он проверял будущие ссылки.

Возможно, вам необходимо будет использовать die() перед live(), чтобы отменить предварительные инструкции.

Если вышеизложенное не имеет смысла, отправьте образец своего кода, чтобы мы могли попробовать его написать.

источник

2010-10-14 02:43:02 Val

Я добавил код в первое сообщение. Я использую live(), когда я клонирую строку. – jasker

Работает ли он сейчас? или все еще есть проблема? – Val

eyecon ColorPicker с jquery Clone

ответ

Смежные вопросы