选择的插件选项不会传递给克隆行

SETUP我正在使用Chosen插件( http://harvesthq.github.com/chosen/ )和使用relCopy脚本进行克隆

问题我可以成功克隆行,但“max_selected_options”之类的选项不会传递给克隆行。 请告诉我我做错了什么?

小提琴文件: http //jsfiddle.net/KjNb5/

HTML代码

    Dallas Cowboys New York Giants Philadelphia Eagles Washington Redskins   Chicago Bears Detroit Lions Green Bay Packers Minnesota Vikings   

 

Add More

JS文件

 /** * jQuery-Plugin "relCopy" * * @version: 1.1.0, 25.02.2010 * * @author: Andres Vidal * code@andresvidal.com * 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(""); } if ($(this).hasClass('chosen-select')) { $(this).next('.chosen-container').remove(); $(this).css({display: "inline-block"}).removeClass("chosen-done"); var that = $(this); setTimeout(function(){ that.removeData('chosen').chosen();},0); } }); }; $(parent).find(rel+':last').after(clone); return false; }); // end click action }); //end each loop return this; // return to jQuery }; })(jQuery); $(function(){ var removeLink = ' remove'; $('a.copy').relCopy({append: removeLink}); }); $(document).ready(function(){ $(".chosen-select-deselect").chosen({allow_single_deselect:true}); $(".chosen-select").chosen({max_selected_options: 2}); $(".chosen-select").bind("chosen:maxselected", function () { alert("Maximum limit reached"); }); $(".chosen-select").trigger('chosen:activate'); }); 

我认为事件不会分配给新克隆的元素,即使在克隆方法中指定了“true”属性。

无论如何,这是一个快速的解决办法,以确保事件始终附加。

新小提琴: http : //jsfiddle.net/KjNb5/4/

老小提琴: http : //jsfiddle.net/KjNb5/1/

HTML

  

Add More

Submit form

JS

 $( main ); function main() { var fieldNumber = 0; var fieldNameAndID = "Opt_"; var maxFieldsAllowed = 5; addField(fieldNumber); $(".copy-link").on("click", function (e) { e.preventDefault(); addField(fieldNumber); }); $(".files").on("click", "a", function (e) { e.preventDefault(); fieldNumber = fieldNumber - 1; $(this) .parent() .slideUp(function () { $(this).remove(); }); }); $(".form-submit-button").on("click", function (e) { e.preventDefault(); alert($("#form").serialize()); }); function addField(index) { fieldNumber = index + 1; if (fieldNumber > maxFieldsAllowed) { fieldNumber = fieldNumber - 1; alert("Sorry! cannot add more than " + maxFieldsAllowed + " fields."); return false; } var newFieldNameAndID = fieldNameAndID + fieldNumber; var $new = $(".more-files-template") .clone(true) .removeClass("more-files-template hidden") .addClass("another-field"); if (fieldNumber == 1) { $new.find(".remove").remove(); } $(".files").append($new); $new.find("select") .attr({ name: newFieldNameAndID, id: newFieldNameAndID }) .chosen({ max_selected_options: 2 }) .bind("chosen:maxselected", function () { alert("Maximum limit reached"); }); } }; 

CSS

 .hidden { display:none; /* to hide template */ } 

这不是完美但会让你朝着正确的方向:)

希望有所帮助。

Varinder