回调中的 DOM 操作答案

【问题标题】：DOM manipulation inside a callback回调中的 DOM 操作
【发布时间】：2016-02-03 07:22:53
【问题描述】：

我正在构建一个连接到socket.io 服务器的客户端。我有这个代码：

$(document).ready(function () {
    Desktops.onData(function (desktops) {
        var desktopsList = $("#desktops");
        $.each(desktops, function (id, desktop) {
            console.log(desktop.name);
            desktopsList.append('<option value="' + id + '">' + desktop.name + '</option>');
        });
    });

    Sockets.connect();
});

当数据从服务器返回时，Desktops.onData 内部的回调被调用。然后我使用这个data(desktops) 并尝试将它附加到一个选择元素中，该元素与Bootstrap plugin 一起使用。在 HTML 方面我有：

<select id="desktops" class="selectpicker" data-live-search="true">
</select>

我知道问题不在于数据，因为console.log 有效。我也知道问题不在于我的 HTML 或 jQuery 代码，因为当我尝试在回调之外附加到 select 时，它可以工作。所以它一定是关于在回调中做 jQuery 的。我该怎么做才能使 jQuery 工作？

谢谢。

【问题讨论】：

你能通过检查工具看到附加的元素吗？您能否提供示例，因为我不明白为什么它可能不起作用（页面上只有一个 #desktops 元素，对吗？）
我刚刚检查过，我实际上可以通过检查工具看到附加的元素，但它们没有呈现在我的屏幕上。这是为什么呢？
如果使用某些插件进行下拉菜单，可能它没有更新 html？
@Justinas 我正在使用引导插件使选择看起来更“漂亮”，您认为问题可能出在那儿吗？我有办法手动更新 html 吗？
请检查控制台

标签： javascript jquery socket.io

【解决方案1】：

鉴于您声明您正在使用的插件 (Bootstrap Select)，您需要对其调用 refresh 方法，以识别新的 option 元素已添加到底层 @987654324 @。试试这个：

Desktops.onData(function (desktops) {
    var desktopsList = $("#desktops");
    $.each(desktops, function (id, desktop) {
        console.log(desktop.name);
        desktopsList.append('<option value="' + id + '">' + desktop.name + '</option>');
    });
    desktopsList.selectpicker('refresh'); // update the bootstrap select here
});

【讨论】：