Select2 clone is working only twice

问题

I'm trying to clone a select2 list and 2 text areas, but it's working only for the first clone, and I don't understand why..any new eye will certainly help ! (the cloning is OK, but the select2 is not applied to the 3rd clone)

HTML part

    <fieldset>
<div id="test">
<div>
<label>Tool Name : </label>
<select class="toollist" name="FSR_tool_id[]" style="width: 350px" />
<option></option>
<option value="1" >bla 1</option>

</select>
<input type="Button" value="ADD ANOTHER TOOL" class="AddTool">
<label>Service Scope</label>
<textarea rows="5" style="width:99%" name="FSR_servicescope[]" class="validate[required]"  />
</textarea>
</br>
<label>Service Description</label>
<textarea rows="10" style="width:99%" name="FSR_servicedesc[]" class="validate[required]" />
</textarea><hr>
</div>
</div>
<input type="hidden" value="0" id="countertool">
</fieldset>

JS part (I call jquery and select 2 before, of course)

$('#test .toollist').select2({ //apply select2 to my element
        placeholder: "Search your Tool",
        allowClear: true
        });

$("input[type='button'].AddTool").live('click',
function() {
    var index = $(this).closest('div').index();
    if (index > 0) {
        $(this).closest('div').remove();
    } else {

        $('#test .toollist').select2('destroy');
        //we have to destroy the select2 before cloning
        var $div = $(this).closest('div').clone(true);
        $div.find('input.AddTool').val("DELETE THIS TOOL");
        //to replace the button "add" by another "delete"
        var $input = $div.find('input.exp');
        var index = $('input#countertool').val();
        var id = 'exp' + index;
        index++;
        $('input#countertool').val(index);
        $input.attr('id', id).data('index', index);
        $(this).closest('#test').append($div);
        //then, we re-apply select2 to the lists            
       $('#test .toollist').select2({
        placeholder: "Search your tool !",
        allowClear: true
        });
        };
});

Any idea of my mistake ?

Thanks a lot in advance !

回答1:

See this fiddle: http://jsfiddle.net/omugbdm1/3/ it's a bit of a mashup of code but should do the trick.

<div id="test">
    <div id="tooltest0" class="tooltest0">
        <label>Tool Name :</label>
        <select class="toollist" name="FSR_tool_id[]" id="FSR_tool_id0" style="width: 350px" />
            <option></option>
            <option value="1">bla 1</option>
        </select>
    </div>
    <div id="tool-placeholder"></div>
    <div>
        <input type="button" value="Add another" />
    </div>
</div>

and

$('.toollist').select2({ //apply select2 to my element
placeholder: "Search your Tool",
allowClear: true
});


$('input[type=button]').click(function () {

    $('.toollist').select2("destroy");
    var noOfDivs = $('.tooltest0').length;
    var clonedDiv = $('.tooltest0').first().clone(true);
    clonedDiv.insertBefore("#tool-placeholder");
    clonedDiv.attr('id', 'tooltest' + noOfDivs);


    $('.toollist').select2({ //apply select2 to my element
    placeholder: "Search your Tool",
    allowClear: true
    });

});

来源：https://stackoverflow.com/questions/29252443/select2-clone-is-working-only-twice

标签

clone

jquery-select2