javascript - 将类应用于动态添加的行

Question

我有一个可以使用按钮动态添加行的表格

<button class="table-add_line" onclick="addRow()" >+ Add Line</button>

在该表中，我有一个可搜索的选择输入，该输入仅适用于第一行，但在添加行时不起作用。第一行是可搜索的，而使用按钮添加的其他行只是简单的选择

$('.addRow').on('click', function(){
    addRow();
});

function addRow() {
  var tr = '<tr>' +

    '<td>' +
    '<select class="table-control chosen-select" name="coa_cli_id[]">' +
    '<option value="0" selected="true" disabled="true"></option>' +
    '@if($coas)' +
    '@foreach($coas as $coa)' +
    '<option value="{{$coa->id}}">{{$coa->name}}</option>' +
    '@endforeach' +
    '@endif' +
    '</select>' +
    '</td>' +
    '<td class="table-debit">' +
    '<input type="number" class="table-control" name="debit[]">' +
    '</td>' +
    '<td class="table-credit">' +
    '<input type="number" class="table-control" name="credit[]">' +
    '</td>' +
    '<td class="table-description">' +
    '<input type="text" class="table-control" name="descriptions[]">' +
    '</td>' +
    '<td><span class="table-remove-btn removeRow" onclick="removeRow()">X</span></td>' +
    '</tr>';
  $('tbody').append(tr);
}

这是一些照片

我希望我添加的所有行都可搜索。
我在网上找不到任何东西。
我多次尝试更改搜索代码。谢谢:)

Answer 1

问题可能来自您的 Blade 代码。

您应该尝试删除放弃您的@if的引号。
我希望这会起作用。

function addRow() {
     var tr = '<tr>' +

     '<td>' +
          '<select class="table-control chosen-select" name="coa_cli_id[]">' +
               '<option value="0" selected="true" disabled="true"></option>';
               @if($coas)
                    @foreach($coas as $coa)
                         tr += '<option value="{{$coa->id}}">{{$coa->name}}</option>';
                    @endforeach
               @endif
               tr += '</select>' +
          '</td>' +
          '<td class="table-debit">' +
               '<input type="number" class="table-control" name="debit[]">' +
          '</td>' +
          '<td class="table-credit">' +
               '<input type="number" class="table-control" name="credit[]">' +
          '</td>' +
          '<td class="table-description">' +
               '<input type="text" class="table-control" name="descriptions[]">' +
          '</td>' +
          '<td><span class="table-remove-btn removeRow" onclick="removeRow()">X</span></td>' +
     '</tr>';
     $('tbody').append(tr);
}