Question

我正在构建一个连接到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)并尝试将其附加到select元素中，该元素与Bootstrap plugin一起使用。在HTML方面，我有：

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

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

感谢。

Answer 1

鉴于您已声明使用的插件（Bootstrap Select），您需要在其上调用refresh方法，以便识别出新的option元素添加到基础select。试试这个：

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
});

回调中的DOM操作

1 个答案: