2013-01-06 64 views
3

我使用jQuery插件(在此處找到:http://harvesthq.github.com/chosen/)。它增加了額外的功能來選擇HTML元素。如何克隆選定插件的選擇元素

我想克隆一個包含select元素的div並遞增所有的id。 問題是克隆沒問題,但select事件適用於源而不適用於克隆。

<div id="smallConfig"> 
<div id="MainConfig_1"> 

<select data-placeholder="Choose a country" name="country_1" id="country_1" class="chzn-select"> 
<option value="" /> 
<option value="Afghanistan">Allemagne</option> 
<option value="Afghanistan">Belgique</option> 
</select> 

<input style="vertical-align: middle;" type="text" class="large" name="cni" id="f_1" /> 

<span class="f_help"> </span> 
<a class="add">Add more</a> 
</div> 
</div> 


<script type="text/javascript"> 

var cur_num = 1; // Counter used previously. 

var addAttendee = function(){ 
var cloned = $("#MainConfig_" + cur_num).clone(true, true).get(0); 
++cur_num; 
cloned.id = "MainConfig_" + cur_num;     // Change the div itself. 
$(cloned).find("*").each(function(index, element) { // And all inner elements. 
    if(element.id) 
    { 
     var matches = element.id.match(/(.+)_\d+/); 
     if(matches && matches.length >= 2)   // Captures start at [1]. 
      element.id = matches[1] + "_" + cur_num; 
    } 
}); 
$(cloned).appendTo($("#smallConfig")); 
}; 

$('.add').click(addAttendee); // attach event 

</script> 

我發現此線程How to add Chosen Plugin to dynamically created/cloned CSS div?但我無法適應我的代碼。

回答

1

我有同樣的問題,並解決它像這樣:

$('.agregar_otro').click(function(e) { 

    var num=$(this).attr("id").split("_"); 
    var cur_num = num[1]; // Counter used previously. 
    //... 
    var cloned = $("#datos_solicitud_" + cur_num).clone(true, true).get(0); 
    ++cur_num; 
    cloned.id = "datos_solicitud_" + cur_num;     // Change the div itself. 
    $(cloned).find("*").each(function(index, element) { // And all inner elements. 
     if(element.id) 
     { 
      var matches = element.id.match(/(.+)_\d+/); 
      if(matches && matches.length >= 2)   // Captures start at [1]. 
       element.id = matches[1] + "_" + cur_num; 
     } 
    }); 
    $(cloned).appendTo($("#contenedor")); 
    //this lines are the ones that solves the problem 
    //id_almacen is the id of the element chosen which was cloned 
    $("#id_almacen_"+cur_num).removeClass("chzn-done").css("display", "block").next().remove(); 
    $("#id_almacen_"+cur_num).chosen(); 
});