如何克隆所选插件的选择元素 [英] How to clone a select element of chosen plugin

问题描述

我使用针对jQuery的选择插件(可在此处找到: http://harvesthq.github.com/chosen /).它添加了额外的功能来选择HTML元素.

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

我想克隆一个包含select元素的div并增加所有id. 问题在于克隆可以，但是select事件仅适用于源而不适用于克隆.

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>

我发现了该线程如何添加选择了要动态创建/克隆CSS div的插件?，但是我无法适应我的代码.

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.

推荐答案

我遇到了同样的问题，并像下面这样解决了它:

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

这篇关于如何克隆所选插件的选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！