我该如何克隆选择的插件

我想使用http://harvesthq.github.com/chosen/ witch jquery clonefunction：

 $(function(){ var removeLink = ' remove'; $('a.add').relCopy({ append: removeLink}); });  
 
 
  jQuery(document).ready(function(){ jQuery(".chzn-select").data("placeholder","Search...").chosen(); });    <?php require_once '../engine/db.php'; $rezultat_url = mysql_query("SELECT `id`, `actor_name` FROM `actors` ORDER BY `id` DESC"); while($row=mysql_fetch_array($rezultat_url)){ $id = $row[id]; $aktor = $row[actor_name]; echo''.$actor.''; } ?>    
 
 
Add More
     

这是我的表单克隆脚本：

 /** * jQuery-Plugin "relCopy" * * @version: 1.1.0, 25.02.2010 * * @author: Andres Vidal * [e-mail] * http://www.andresvidal.com * * Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector * defined in the attribute "rel" tag. This defines the DOM element to copy. * @example: $('a.copy').relCopy({limit: 5}); // Copy Phone * * @param: string excludeSelector - A jQuery selector used to exclude an element and its children * @param: integer limit - The number of allowed copies. Default: 0 is unlimited * @param: string append - HTML to attach at the end of each copy. Default: remove link * @param: string copyClass - A class to attach to each copy * @param: boolean clearInputs - Option to clear each copies text input fields or textarea * */ (function($) { $.fn.relCopy = function(options) { var settings = jQuery.extend({ excludeSelector: ".exclude", emptySelector: ".empty", copyClass: "copy", append: '', clearInputs: true, limit: 0 // 0 = unlimited }, options); settings.limit = parseInt(settings.limit); // loop each element this.each(function() { // set click action $(this).click(function(){ var rel = $(this).attr('rel'); // rel in jquery selector format var counter = $(rel).length; // stop limit if (settings.limit != 0 && counter >= settings.limit){ return false; }; var master = $(rel+":first"); var parent = $(master).parent(); var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append); //Remove Elements with excludeSelector if (settings.excludeSelector){ $(clone).find(settings.excludeSelector).remove(); }; //Empty Elements with emptySelector if (settings.emptySelector){ $(clone).find(settings.emptySelector).empty(); }; // Increment Clone IDs if ( $(clone).attr('id') ){ var newid = $(clone).attr('id') + (counter +1); $(clone).attr('id', newid); }; // Increment Clone Children IDs $(clone).find('[id]').each(function(){ var newid = $(this).attr('id') + (counter +1); $(this).attr('id', newid); }); //Clear Inputs/Textarea if (settings.clearInputs){ $(clone).find(':input').each(function(){ var type = $(this).attr('type'); switch(type) { case "button": break; case "reset": break; case "submit": break; case "checkbox": $(this).attr('checked', ''); break; default: $(this).val(""); } }); }; $(parent).find(rel+':last').after(clone); return false; }); // end click action }); //end each loop return this; // return to jQuery }; })(jQuery) 

问题是，当我克隆Chosen插件表单时，只有第一个工作，所有克隆的表单显示从第一个下拉。

我在这里发现了类似的问题 – > 如何将Chosen Plugin添加到动态创建/克隆的CSS div中？

但我不知道如何使它适合我的脚本。 有人可以帮助我适应我的脚本，并可以告诉我应该在哪里复制它。

Answer 1

我会在清除输入区域添加一个条件，以检查.chz-select类.chz-select并按照您链接的答案执行重新初始化：

UPDATE

由于您使用true参数进行克隆，因此需要在重新初始化之前从元素中删除数据，同时我发现所选插件在添加display:inline-block;之后没有获得元素的计算宽度的问题display:inline-block; 所以我不得不在重新初始化之前使用超时来引入最小延迟

 //Clear Inputs/Textarea if (settings.clearInputs){ $(clone).find(':input').each(function(){ var type = $(this).attr('type'); switch(type) { case "button": break; case "reset": break; case "submit": break; case "checkbox": $(this).attr('checked', ''); break; default: $(this).val(""); } if ($(this).hasClass('chzn-select')) { $(this).next('.chzn-container').remove(); $(this).css({display: "inline-block"}).removeClass("chzn-done"); var that = $(this); setTimeout(function () { that.removeData('chosen').chosen(); }, 0); } }); };