在动态创建的内容上应用select2

Question

我点击了一个特定链接时克隆的HTML块 - 它允许用户选择多个产品添加到他们的订单中。

在每一行中都有一个包含select2类的选择框，这会在该字段上启用select2插件。

<div class="form-group product">
    <div class="col-md-2">
        <input type="text" class="form-control" name="quantity[]" placeholder="Quantity" required>
    </div>
    <div class="col-md-7">
        <select name="sku[]" class="form-control select2"><option>1</option><option>2</option><option>3</option></select>
    </div>
</div>  

当我点击克隆上述HTML时，第二行没有有效select2。

$('.select2').select2();

$('.new-product').click(function() {
    $( ".product:first" ).clone().appendTo( ".products" );
    return false;
});

我尝试在$('.select2').select2();之前添加return false，但这似乎不起作用。

Answer 1

尝试

$('.new-product').click(function() {
    var clone = $( ".product:first" ).clone();
    $(".products").append(clone);
    clone.find('.select2').select2();
    return false;
});