如何使用动态填充的选项克隆jQuery Chosen选择框？

Question

我在克隆现有选定元素时遇到问题（不是选项而是整个选择框）并为它们创建动态ID。

我能够克隆所选元素，但是它具有与所选父元素相同的id，并且不允许在那里选择一个选项。

当我点击新生成的所选框时，所选的已克隆的父项显示了要选择的选项列表，而不是选择的子项。选择的孩子被冻结了，我无法选择其中的选项。

截图：

JS：

$("#addCostDetailsRowBtn").button().click(addCostRowFn);

var addCostRowFn = function () {
var rowLen = $(".costTemplateRow").length;
//alert(rowLen);
var $newRow = $("#costTemplateRow1").clone(true);
$newRow.find('select').each(function () {
    //alert($(this));
    //alert($(this).attr('id'));
    var item = $(this).attr('id');
    if('undefined'!=item) {
        var newItem = item.replace(/^(.*)(\d+)$/, function(match, p1, p2) {
            return p1+(parseInt(p2)+1);
        });
        $(this).attr('id', newItem);
        $(this).removeClass("chzn-done");

    }
});

$('#costsTable tr:last').before($newRow);
return false;
};

有人可以帮我解决问题吗？

谢谢， Jaya Krishna

Answer 1

似乎问题是克隆仍然与原始对象共享一些数据。来自Jquery文档http://api.jquery.com/clone/

通常，绑定到原始元素的任何事件处理程序都不会复制到克隆。可选的withDataAndEvents参数允许我们更改此行为，而是复制所有事件处理程序，并绑定到元素的新副本。从jQuery 1.4开始，所有元素数据（由.data（）方法附加）也会复制到新副本。

但是，元素数据中的对象和数组不会被复制，并且将继续在克隆元素和原始元素之间共享。要深度复制所有数据，请手动复制每个数据：

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
$clone = $elem.clone( true )
.data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

希望这有帮助

Answer 2

好的，这就是我用克隆动态填充选项克隆选定控件的方法。也许是一种更好的方法，但如果没有关于jquery缓存/克隆的更多信息，这至少可行。

var $parent = $('#myThingParentNode');
var clonePropDdl = $parent.find('.chosenProperty').clone();
//get selected value of chosen venue control
var clonePropDdlVal = $venue.find('.chosenProperty').val();
//find the element to add the new Chosen control
var $newCloneElem = $('#newPropCloneElement');
//add the new clone
$newCloneElem.append(clonePropDdl);
//initialize the clone
$newCloneElem.chosen({ width: "150px" });
//delete the cloned chosen detritis!! This is what makes this work
**$newCloneElem.find('.chosen-container:eq(1)').remove();**
//set the selected value of the new clone to value of the clone source
$newCloneElem.val(lastVenueVal).trigger('chosen:updated');