How to clone a select element of chosen plugin

Question

I use the Chosen Plugin for jQuery (found here: http://harvesthq.github.com/chosen/ ). It adds extra functionality to select HTML elements.

I wanted to clone a div that contains a select element and increment all the id. The problem is that the clone is ok but the select event apply to the source and not to the clone.

<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>

I found this thread How to add Chosen Plugin to dynamically created / cloned CSS div? but i'm not able to adapt to my code.

Answer 1

I had the same problem, and solved it like this:

$('.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();
});