Select2 动态添加的输入不起作用

Question

我有一张使用 Select2 中的多选表，效果很好。但是我有一个按钮可以通过克隆前一个并向该行添加一个新的 id 来添加一行，我对多选使用相同的相同标记。那个是残疾人。我尝试在添加行后重新初始化但不起作用:( 下面是 html 和 js。HTML:<select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>  <?=$displaySelectData?></select>记者：$(document).ready(function () {  $('.js-example-basic-multiple').select2();  var sample_row = 1;  $('#addrow').click(function(e) {    e.preventDefault();    var sample_row_template = $('#sample_row_template')      .clone()  // CLONE THE TEMPLATE      .attr('id', 'row' + (sample_row++)) // MAKE THE ID UNIQUE      .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE      .show(); // SHOW IT  });              $('.js-example-basic-multiple').select2();});我正在克隆的行<tr id="sample_row_template" style="display: none;">    <td width="200px">        <input class="form-control" name="sample-reference" type="text" value="">    </td>    <td width="150px">        <input class="form-control" name="sample-date" type="date" value="<?=$today?>" id="example-date-input">    </td>    <td width="150px">        <input class="form-control" name="sample-time" type="time" value="<?=$now?>" id="example-time-input">    </td>    <td >        <select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>            <?=$displaySelectData?>        </select>    </td>    <td width="200px">        <select class="fart form-control">            <option>Select</option>            <option value="1">1 Day</option>            <option value="2">2 Day</option>            <option value="3">3 Day</option>            <option value="4">4 Day</option>            <option value="5">5 Day</option>            <option value="6">6 Day</option>            <option value="7">7 Day</option>            <option value="8">8 Day</option>            <option value="9">9 Day</option>            <option value="10" selected>10 Day</option>        </select>    </td>    </div></tr>

Answer 1

.select2()主要问题是您在克隆该行后没有调用。如果你仔细观察，你的第二次调用.select2()发生在你的处理程序之外.click()，即使你的空格让它看起来像是在里面。

另一个问题是最好只.select2()调用克隆的行，而不是全局调用。在我的测试中，如果我像您一样保持函数调用，那么在第一行结束后克隆的任何行都会显示 select 下拉列表和 select2 下拉列表彼此相邻。这段代码应该可以解决问题：

$(document).ready(function () {

  var sample_row = 1;

  $('#addrow').click(function(e) {

    e.preventDefault();

    var new_row = $('#sample_row_template')

      .clone() // CLONE THE TEMPLATE

      .attr('id', 'row' + (sample_row++)) // MAKE THE TABLE ROW ID UNIQUE

      .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE BODY

      .show() // SHOW IT

     ;

     // now, initialize select2 *only* on the new row that was created

     new_row.find('.js-example-basic-multiple').select2();

  });

});