如何克隆使用动态填充选项的jQuery选择框？ [英] How to clone a jQuery Chosen select box with dynamically populated options?

问题描述

我正在克隆现有的所选元素（而不是选项，但整个选择框）面临问题，并为其创建一个动态的ID。能够克隆所选择的元素，但它具有与父选择的生成相同的ID，并且不允许在其中选择一个选项。

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

截图：

< img src =https://i.stack.imgur.com/R9Pq5.jpgalt =>

JS：

  $（＃addCostDetailsRowBtn）。button（）。click（addCostRowFn）; 
 
 var addCostRowFn = function（）{
 var rowLen = $（。costTemplateRow）。 
 // 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）; 
}）; 
 $这个）.attr（'id'，newItem）; 
 $（this）.removeClass（chzn-done）; 
 
} 
}）; 
 
 $（'＃costTable tr：last'）。before（$ newRow）; 
返回false; 
}; 
  

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

$ b $谢谢，
Jaya Krishna

解决方案

似乎问题是克隆还是分享一些数据与原始对象。从Jquery文档 http://api.jquery.com/clone/

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

然而，元素数据中的对象和数组是未复制，并将继续在克隆元素和原始元素之间共享。要深入复制所有数据，请手动复制每个数据：

  var $ elem = $（'＃elem'）。data arr：[1]），//附带数据的原始元素
 $ clone = $ elem.clone（true）
 .data（arr，$ .extend（[]，$ elem。数据（arr）））; //深层复制以防止数据共享
  

希望这有助于

I'm facing issues while cloning an existing chosen element (not the options but the entire select box) and creating a dynamic id for them.

I'm able to clone the chosen element however, it has the same id generated as that of parent chosen and is not allowing to select an option in there.

When I click on the newly generated chosen box, the parent chosen that was cloned is showing the list of options to select instead of child chosen. Child chosen was made frozen and I'm unable to select the options in it.

Screenshot:

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

Can someone please help me get the issue resolved?

Thanks, Jaya Krishna

解决方案

It seems that the problem is that the clone is still sharing some data with the original object. From the Jquery docs http://api.jquery.com/clone/

Normally, any event handlers bound to the original element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the .data() method) is also copied to the new copy.

However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:

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

Hope this helps

这篇关于如何克隆使用动态填充选项的jQuery选择框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！