Question

我正在使用Chosen JS jQuery插件＆amp;每次克隆元素（使用true，ture - 这是因为我需要复制on click事件）都会附加到dom上时，我试图让它重新渲染。

这是我的代码：

    var container = jQuery(self.options.parent_class + ' tbody tr:first-child'),
    container_clone = container.clone(true,true);

    var elem = container_clone.find('select');
    elem.chosen('destroy');
    elem.chosen();

    return container_clone;

这是小提琴：http://jsfiddle.net/udj7t/1/

Answer 1

试试这个，

$(document).ready(function(){
    $('select').chosen();
    $('a#clone_me').on('click', function(){
        var $clone = jQuery('#toClone select:first').clone();
        $clone.removeAttr('style');
        //$clone.chosen('destroy');
        jQuery('#toClone').append($clone);
        jQuery('#toClone select:last').chosen();
    });
});

<强> Demo

Answer 2

对于那些对克隆有效的解决方案感兴趣的人（真实，真实），根据OP的实际问题，我发现做以下工作对我有用。我在克隆行中也有多个选择，所以我需要使用each（）方法。这可以很容易地适应。

// Look through the cloned row and find each select
$clone.find('select').each(function (){

    // Because chosen is a bitch with deep cloned events 
    // We need to make another internal clone with no events
    $clonedChosen = $(this).clone().off();

    // Now we can delete the original select box
    // AND delete the chosen elements and events
    // THEN add the new raw select box back to the TD
    $parentTd = $(this).closest('td');
    $parentTd.empty().append($($clonedChosen).show());

    // Finally, we can initialize this new chosen select
    $parentTd.find('select').chosen();
}

用克隆选择JS（true，true），在追加时重新渲染

2 个答案: