Javascript 渲染后的选择器选择器

我使用Knockout，我的问题是我似乎无法呈现Selectpicker。我将直接跳到一些代码中，帮助自己解释

脚本：

<script src="~/scripts/jquery-3.1.1.js"></script>


<script src="~/Scripts/knockout-3.4.2.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/bootstrap-select.min.js"></script>

下面是我用来获取对象并将它们绑定到视图的Ajax

 $.ajax({
            type: "GET",
            url:  "@Url.Action("GetView", "Medarbejders", new {area = "" , id = ViewBag.id})",
        }).done(function (data) {
            $(data).each(function (index, element) {
                var mappedItem =
                    {
                        Id: ko.observable(element.Id),
                        MedarbejderId: ko.observable(element.MedarbejderId),
                        Mode: ko.observable("edit")
                    };
                console.log(mappedItem);
                viewModel.lookupCollection.push(mappedItem);
            });



            ko.applyBindings(viewModel);
            // Here is where i think i would need to Render the script. But getting an Error see futher down.

        });
    });

这就引出了我的模板

 <tbody data-bind="foreach: lookupCollection">

        <tr data-bind="template: { name: Mode, data: $data }"></tr>

    </tbody>
</table>

<script type="text/html" id="display">






    <td data-bind="text: MedarbejderId"></td>


    <td>
        <button class="btn btn-success kout-edit">ændre</button>
        <button class="btn btn-danger kout-delete">slet</button>
    </td>


</script>

<script type="text/html" id="edit">



    <td><u>Medarbejder</u><br />@Html.DropDownList("MedarbejderId", (SelectList)ViewBag.MedarbejderId, "Vælg medarbejdere", htmlAttributes: new
                           {
                               @data_bind = "value: MedarbejderId",
                               @class = "selectpicker form-control",
                               data_show_subtext = "true",
                               data_live_search = "true"

                           })
    </td>

JsFiddle：

---

如果添加换行符，选择器将无法工作。

我几个月前也有过同样的选择。因为问题是站点没有正确加载js文件。这些是我尝试的东西，其中一个解决了我的问题

如果您也在此网站上使用布局，请删除：

因为你 已使用将jquery添加到布局中

@Scripts.Render（“~/bundles/jquery”）

不要像

那样添加js文件，而是像这样将它们添加到BundleConfig:

bundles.add（newscriptbundle（“~/bundles/jquery”）。Include（“~/Scripts/path to your js/jsname.js”）并像以下那样使用它们：
@sectionscripts{@Scripts.Render（“~/bundles/jsbundlename”）//jscode}

对css文件执行同样的操作，但如下所示：

bundles.Add（新样式bundle（“~/Content/css”）。包括（“~/Content/bootstrap.css”；

并像这样使用它们：

@section Styles{@Styles.Render（“~/bundles/cssbundlename”）}

---

只需将其添加到您的内部

addGifts

功能：

self.addGift = function() {
    self.gifts.push({
        name: "",
        price: ""
    });
    $(".selectpicker:visible").selectpicker({
        liveSearch: true,
        showSubtext: true
    });
};

$（“.selectpicker:visible”）

将只初始化尚未初始化的选择选择器，即visible

工作小提琴：

---

您使用的是bootstrap-picker吗？是的，bootstrap-select。您是否尝试重新排序js参考？是的，很遗憾没有运气。您能给我看一下您所做的捆绑吗？谢谢您的回复，但在这种情况下，它不会改变任何东西，因为Selectpicker是独立工作的。只有当我添加新对象时，它不会。但我会为捆绑更改它再一次。谢谢。哈哈谢谢，你不会相信我花了多长时间找到这个解决方案。非常感谢。

 <tbody data-bind="foreach: lookupCollection">

        <tr data-bind="template: { name: Mode, data: $data }"></tr>

    </tbody>
</table>

<script type="text/html" id="display">






    <td data-bind="text: MedarbejderId"></td>


    <td>
        <button class="btn btn-success kout-edit">ændre</button>
        <button class="btn btn-danger kout-delete">slet</button>
    </td>


</script>

<script type="text/html" id="edit">



    <td><u>Medarbejder</u><br />@Html.DropDownList("MedarbejderId", (SelectList)ViewBag.MedarbejderId, "Vælg medarbejdere", htmlAttributes: new
                           {
                               @data_bind = "value: MedarbejderId",
                               @class = "selectpicker form-control",
                               data_show_subtext = "true",
                               data_live_search = "true"

                           })
    </td>

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

self.addGift = function() {
    self.gifts.push({
        name: "",
        price: ""
    });
    $(".selectpicker:visible").selectpicker({
        liveSearch: true,
        showSubtext: true
    });
};