ajax 成功后，ajax 回调中的语义 UI 下拉菜单未初始化

Question

我在 Laravel 控制器功能中使用语义 UI 下拉列表和数据表。我正在向路由发送 ajax 请求，并接收 JSON 数据（包含表行），其中一个键（列）包含 HTML。 HTML 包含一个语义 UI 下拉列表，该下拉列表在 Ajax 完成后不会被初始化。我可以确认 DOM 已加载，并且能够通过 ajax 成功回调使用 jQuery（例如使用 .hide()）操作 DOM 元素，并且可以初始化页面上的 DataTable（在 ajax 中的 Dropdown 初始化之后运行）成功回调函数）。

我创建了一个 JSfiddle ，它具有几乎相同的 ajax 请求，并且它按预期工作：JSFiddle。

在 JSFiddle 中，ajax 请求使用包含选择下拉 HTML 的行中的键获取 JSON 数据。然后，HTML 被附加到表的 tbody，并且 Dropdown 和 DataTable 表都将被初始化。

这是JSFiddle中的ajax调用：

$.ajax({
    url: "/echo/json/",
        type: 'POST',
    dataType: 'json',
        data: {
            json:'[{"name":"Stuart Little","country":"Argentina","html":"<select id= \'someId_1\' name=\'someName_1\' multiple=\'\' class=\'ui dropdown multiple fluid scrolling clearable search remote selection \'><option>- Select One -</option><option value=\'1\'>Option 1</option></select>"},{"name":"Tes Ter","country":"Canada","html":"<select id= \'someId_2\' name=\'someName_2\' multiple=\'\' class=\'ui dropdown multiple fluid scrolling clearable search remote selection \'><option>- Select One -</option><option value=\'1\'>Option 1</option></select>"}]'
        },
    success: function (response) {
            $('.waiting').hide();
             response.forEach(function (item, index, data) {
                    var o = '';
                    o += '<tr>';
                    o += '<td>' + item.name + '</td>';
                    o += '<td>'+item.country+'</td>';
                    o += '<td>';
                    o += '<div id="someDiv_'+index+'" class="w-100">';
                    o += '<div class="w-100">';
                    o += item.html;
                    o += '</div>';
                    o += '</div>';
                    o += '</td>';
                    o += '</tr>';
                    $('#table tbody').append(o);
                    $('#table').DataTable();
                    $('.ui.dropdown') .dropdown();
            }); 
        }
});

这是 Laravel 应用程序中的 ajax 请求：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    }
});
$.ajax({
    url : "{{ route('settings.table', ['app_id' => 1]) }}",
    type: 'POST',
    dataType: 'json',
    success: function (response) {
            var arr = response['data'];
            arr.forEach(function (item, index, arr) {
                    var o = '';
                    o += '<tr>';
                    o += '<td>'+item.company_name+'</td>';
                    o += '<td>'+item.name+'</td>';
                    o += '<td>'+item.email+'</td>';
                    o += '<td>';
                    o += '<div class="w-100">';
                    o += item.html;
                    o += '</div>';
                    o += '</td>';
                    o += '</tr>';
                    $('#table tbody').append(o);
                    $('#table').DataTable();
                    $('.ui.dropdown').dropdown();
            });
        }
});

但是，在我的 Laravel 应用程序中，下拉列表没有初始化，只有 DataTable 表被初始化。我在控制台中没有收到任何错误。

我尝试了静态选择下拉菜单（而不是 Ajax 调用中的动态选择下拉菜单），它在页面加载时初始化，没有出现任何问题。这就是我在其他页面中使用下拉菜单的方式，但在这种情况下，页面加载时间太长，所以我需要先加载页面，然后在页面加载后构建表格和下拉菜单。

如上所述，静态选择在页面加载时初始化，但它也在 ajax 成功函数中初始化，没有问题。只有由 ajax 回调（动态）创建的 DOM 元素不会初始化。

谢谢你。

Answer 1

我在这个问题上花了两天时间，但在这里发布后不久我就找到了解决方案。 AJAX 调用是异步的，因此我将

async: false

添加到 ajax 函数中，并初始化了语义 UI 下拉列表。