Question

Я хотел использовать http://harvesthq.github.com/chosen/ ведьма функции JQuery клон:

<script type="text/javascript"> 
    $(function(){ 
     var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>'; 
     $('a.add').relCopy({ append: removeLink}); 
    }); 
</script> 
<form method="post" action=""> 
    <div id="cloner"> 
    <p class="clone"> 
     <script type="text/javascript"> 
      jQuery(document).ready(function(){ 
      jQuery(".chzn-select").data("placeholder","Search...").chosen(); 
     }); 
     </script> 
     <select data-placeholder="Search..." name="actor_name[]" class="chzn-select" style="width:350px;" tabindex="2"> 
      <option value=""></option> 
      <?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'<option value="'.$id.'">'.$actor.'</option>'; 
       } 
      ?> 
      </select> 
     <input type="text" name="role_name[]" value="" /> 
     <input type="text" name="epi_count[]" value="" /> 
    </p> 
    </div> 
    <p><a href="#" class="add" rel=".clone">Add More</a></p> 
    <script src="chosen.jquery.js" type="text/javascript"></script> 
    <script src="prism.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" src="../administrator/js/reCopy.js"></script> 
</form> 

Это моя форма clone'ing сценарий:

/** 
* 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(""); 
        } 
       }); 
      }; 

      $(parent).find(rel+':last').after(clone); 
      return false; 

      }); // end click action 

     }); //end each loop 

     return this; // return to jQuery 

    }; 
})(jQuery) 

Проблема заключается в том, что, когда я клонировать Выбранная форма плагина, только первая работает, и все клонированные показывают выпадающий список из первого.

я нашел подобную проблему с некоторым решением здесь ->How to add Chosen Plugin to dynamically created/cloned CSS div?

Но я понятия не имею, как вписать его в мой сценарий. Может кто-то помочь адаптировать его к моему сценарию и показать мне, где его скопировать.

Answer 1

Я хотел бы добавить условие к области ясных входов для проверки выбирает с .chz-select классом и выполнить повторную инициализацию, как в ответе вы связаны:

UPDATE

Поскольку вы клонирование с использованием истинного параметра, вам нужно удалить данные из элемента перед повторной инициализацией, также я обнаружил проблему с выбранным плагином, не получая расчетную ширину элемента после добавления 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); 
     } 
    }); 
};