添加新行后，select2 不起作用

Question

我通过 jquery 在表中添加了新行，然后 select2 不起作用

// Javascript

$("#add").click(function () {

    $("#mytable").each(function () {

        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {

            tds += '<td>' + $(this).html() +'</td>';

        });

        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);

        } else {

            $(this).append(tds);

        }

    });

});

//HTML

<form method="POST" action="/store">

        {{ csrf_field() }}

        <h2>Invoice</h2>

        <div>

            <!-- Customer job-->

            <div class="form-group job">

            Customer job:

            <select class="customer_job" name="customer_job">

                @if(count($customers)>1)

                    @foreach($customers as $customer)

                        <option>{{$customer ->job}}</option>  

                    @endforeach

                @else 

                    <p>No posts found</p>

                @endif

            </select>

            </div>

            <!--Date-->

            <div class="form-group date">

            Date:

            <input type="date" name="date">   

            </div>

        </div>

        <br><br>

        <table id="mytable">

                <tr>

                  <th>ITEM</th>

                  <th>DESCRIPTION</th>

                  <th>QUANTITY</th>

                  <th>RATE</th>

                  <th>AMOUNT</th>

                </tr>

Answer 1

使用此代码更改您的 js 代码var j =2;&nbsp; &nbsp; $("#add").on('click', function () {&nbsp; &nbsp; var data = '<tr><td><select class="item" name="item">@if(count($items)>1)@foreach($items as $item)<option>{{$item ->item_name}}</option>&nbsp; @endforeach @endif</select></td><td> <input type="text" name="description"></td> <td> <input type="number" name="quantity" id="quantity" step="1"> </td> <td> <select class="rate" name="rate" id="rate"> @if(count($items)>1) @foreach($items as $item)&nbsp; <option>{{$item ->rate}}</option>&nbsp; &nbsp; @endforeach @endif</select></td><td><input type="number" name="amount" id="amount" readonly />&nbsp; <a href="javascript:void(0);" class="remCF" style="width:auto;font-size:28px;margin-left:1vw;color:#f33102;padding-top:6px;display:inline-block;"><i class="fa fa-times-circle"></i></a></td></tr>';&nbsp; &nbsp; $('#mytable tr:last').after(data);&nbsp; &nbsp; j++;&nbsp; &nbsp; $(".remCF").on('click', function () {&nbsp; &nbsp; $(this).parent().parent().remove();&nbsp; &nbsp; });});我希望它有效