选择的插件不适用于 table 中动态创建的行

Question

我必须说我是 JQuery 的初学者，但我通常会尝试自己找出并解决问题。但是现在我遇到了问题，我被卡住了我有一个 table 动态添加的行和每个 select 框用于单个删除或多个删除，一切正常，除非添加行时选择应用但 select 框无论我做什么都不起作用。

HTML

<table id="dataTable">
<tr>
  <th><input type="checkbox" id="selectall" value="selectAll"/></th>
  <th>Field-1</th>
  <th>Field-2</th>
  <th>Field-3</th>
  <th>Field-4</th>
  <th>Field-5</th>
</tr>
  <tbody>
      <tr>
        <td><input type="checkbox"  class="check"></td>
        <td>
            <select name="input-1[]" class="chosen_select_L">
                <option></option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
        <td><input name="input-2[]" type="text" class="chosen_text"></td>
        <td><input name="input-3[]" type="text" class="chosen_text"></td>
        <td><input name="input-4[]" type="text" class="chosen_text"></td>
        <td>
            <select name="input-5[]" class="chosen_select_M">
                <option></option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
      </tr>
  </tbody>
</table>
<input type="button" value="Add Field" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Field" onClick="deleteRow('dataTable')"  />

JS

$(".chosen_select_L").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });
$(".chosen_select_M").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });

$(document).ready(function() {
    $('#selectall').click(function(event) {
        if(this.checked) { 
            $('.check').each(function() { 
                this.checked = true; 
            });
        }else{
            $('.check').each(function() { 
                this.checked = false; 
            });        
        }
    });
});

function addRow(dataTable) {
    var table = document.getElementById(dataTable);
    var rowCount = table.rows.length;
    if(rowCount < 11){
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        }
    }else{
         alert("Maximum fields is 10.");

    }
}

function deleteRow(dataTable) {
    var table = document.getElementById(dataTable);
    var rowCount = table.rows.length;
    for(var i=2; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
                alert("Cannot Remove all fields.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

我尝试提供不同的 ID 或 class 名称，视觉上一切看起来都很好，但没有一个 select 框实际工作，除了第一行不是动态创建的。

我创建了一个 jsfiddle 供大家查看。任何帮助将不胜感激。谢谢

Answer 1

这是更正后的 fiddle。您需要使用

销毁选择

$(".chosen_select_L").chosen('destroy');

在获取 innerHTML 之前，然后在附加内容后重新初始化它。

选择的插件不适用于 table 中动态创建的行

chosen plugin not working with dynamically created rows in a table

html

javascript

jquery

jquery-plugins

jquery-chosen