无法克隆 <select> 并出现“.select2 不是函数”错误

Question

我正在尝试以Select2动态形式使用（使用 jQuery 克隆添加新行），但显然克隆的行与Select2. 得到错误

创建了第二个选择菜单，但它产生了错误：

Uncaught TypeError: $(...).select2 is not a function

我正在使用这个 HTML 部分：

<tbody id="treatmentlist">

    <tr class="itemData">

        <td>

           {{Form::select('treatments[]',$treatments, null, ['class' => 'form-control treatment', 'placeholder' => 'Select treatment' ])}}

        </td>

        <td><i class="fas fa-plus-circle" id='addRow'><i class="fas fa-minus-circle" id="delRow"></i></td>

    </tr>

</tbody>

这是脚本部分：

@section('scripts')

    <script>

        $(".treatment").select2();

        $("#addRow").on('click', function (e) {

            e.preventDefault();

            var $tr    = $(this).closest('.itemData');

            var $clone = $tr.clone();

            $tr.after($clone);

            $(".treatment").select2();

        });

    </script>

@endsection

已经尝试添加select2('destroy')没有运气。

任何建议如何使新克隆的行保留 Select2 功能？

Answer 1

显然这个问题与 Laravel 布局页面（app.blade.php）有关。它在调用 bootstrap 时已经加载了 jQuery。所以在 php 中我不需要再次加载 jQuery。所以修订app.blade.php：&nbsp; &nbsp; <!-- Scripts, remove defer from app.js, move selec2.min.js & select2.min.css here -->&nbsp; &nbsp; <script src="{{ asset('js/app.js') }}"></script>&nbsp;&nbsp;&nbsp; &nbsp; <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>......<!- and adding this part -->&nbsp;&nbsp;@yield('scripts')在 php 方面，Select2 的更改是：在 onClick 函数之后，select2('destroy')首先调用然后克隆包含选择元素的行最后使用 . 在最后一个新添加的元素上重新启用 Select2&nbsp;select2()。@section('scripts')<script>$(document).ready(function () {&nbsp; &nbsp; $("#contents").children("td").children("select").select2();&nbsp; &nbsp; $(document).on('click', '#delRow', function(){&nbsp; &nbsp; &nbsp; &nbsp; if( $(this).closest('tr').is('tr:only-child') ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('cannot delete last row');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).closest('tr').remove();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; $("#addRow").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; $("#contents").children("td").children("select").select2("destroy").end();&nbsp; &nbsp; &nbsp; &nbsp; // add <tr><td> directive first&nbsp; &nbsp; &nbsp; &nbsp; var newRow = '<tr id="contents"><td id="trx"><td> <i class="fas fa-minus-circle" id="delRow">';&nbsp; &nbsp; &nbsp; &nbsp; $(newRow).appendTo($("#treatmentlist"));&nbsp; &nbsp; &nbsp; &nbsp; // append select component on the last tr&nbsp; &nbsp; &nbsp; &nbsp; $('#treatmentlist tr:last').children("td:first-child").append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // clone the row and insert it in the DOM&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#contents").children("td").children("select").first().clone()&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; // enable Select2 on the last newly added element&nbsp; &nbsp; &nbsp; &nbsp; $('#treatmentlist tr:last').children("td").children("select").select2();&nbsp; &nbsp; &nbsp; &nbsp; // enable Select2 on the select elements&nbsp; &nbsp; &nbsp; &nbsp; $("#contents").children("td").children("select").select2();&nbsp; &nbsp; });});</script>@endsection在 HTML 中，应用如下更改：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody id="treatmentlist">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="contents">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="trx">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{Form::select('treatments[]',$treatments, null, ['class' => 'form-control treatment', 'placeholder' => 'Select treatment' ])}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-plus-circle" id='addRow'></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>

Answer 2

我不能评论低于 50 的声誉，希望这个例子对你有所帮助。解释在这里http://www.phpjavascript.com/2018_03_16_archive.html$(function () {&nbsp; &nbsp; $("#addrow").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; var tr = "<tr>" + "<td contenteditable='true'></td>".&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeat($("#myTable tr:eq(0) td").length) + "</tr>"&nbsp; &nbsp; &nbsp; &nbsp; $("#myTable").append(tr);&nbsp; &nbsp; });&nbsp; &nbsp; $("#addcolumn").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; $("#myTable tr").append($("<td contenteditable='true'></td>"));&nbsp; &nbsp; &nbsp; &nbsp; $(document).on('click', '.js-del-row', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#myTable').find('tr:last').remove();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $(document).on('click', '.js-del-column', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#myTable').find('td:last').remove();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});