選的插件選項不會傳遞到克隆行

Question

SETUP 我用選的插件（http://harvesthq.github.com/chosen/） 和使用relCopy腳本克隆

問題 我可以成功地克隆行，但像「max_selected_options」選項不會傳遞給克隆的行。 請告訴我我做錯了什麼？

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

HTML代碼

<label>Select Options</label> 
<select data-placeholder="You may select upto Two options" name="Opt_1" id="Opt_1" class="chosen-select" multiple tabindex="6" style="width: 280px; "> 
<option value=""></option> 
    <optgroup label="NFC EAST"> 
     <option>Dallas Cowboys</option> 
     <option>New York Giants</option> 
     <option>Philadelphia Eagles</option> 
     <option>Washington Redskins</option> 
    </optgroup> 
    <optgroup label="NFC NORTH"> 
     <option>Chicago Bears</option> 
     <option>Detroit Lions</option> 
     <option>Green Bay Packers</option> 
     <option>Minnesota Vikings</option> 
    </optgroup> 
</select> 

<p><a href="#" class="copy" rel=".addMoreFiles">Add More</a></p> 

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}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a> 
* 
* @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 = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>'; 
$('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'); 
    }); 

Answer 1

即使在克隆方法中指定了「true」屬性，我認爲事件並未分配給新克隆的元素。

無論如何，heres快速解決方案以確保始終附加事件。

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

舊小提琴：http://jsfiddle.net/KjNb5/1/

HTML

<div class="more-files-template hidden"> 
    <label>Select Options</label> 
    <select data-placeholder="You may select upto Two options" multiple tabindex="6" style="width: 280px; "> 
     <option value=""></option> 
     <optgroup label="NFC EAST"> 
      <option>Dallas Cowboys</option> 
      <option>New York Giants</option> 
      <option>Philadelphia Eagles</option> 
      <option>Washington Redskins</option> 
     </optgroup> 
     <optgroup label="NFC NORTH"> 
      <option>Chicago Bears</option> 
      <option>Detroit Lions</option> 
      <option>Green Bay Packers</option> 
      <option>Minnesota Vikings</option> 
     </optgroup> 
    </select> <a class="remove" href="#">remove</a> 

</div> 
<form id="form" action="/" method="post"> 
    <div class="files"></div> 
</form> 
<p><a href="#" class="copy-link">Add More</a> 
</p> 
<p><a href="#" class="form-submit-button">Submit form</a> 
</p> 

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