在动态添加的 table 行中丢失 css 样式

Question

我已经阅读了很多关于动态添加和删除表行的内容。我非常确定我所做的一切都是正确的。

我的看法：

 <table id="LibList" class="table table-responsive table-condensed table-bordered">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Types)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Balance)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Payment)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Interest)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Teams)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Tenure)
                    </th>
                    <th>

                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Step3.Liabilities) {
                    Html.RenderPartial("_LibListItem", item);
                }
            </tbody>
        </table>
        <p>
            <button type="button" class="btn btn-primary add-button">
                <span class="glyphicon glyphicon-plus"></span> Add New
            </button>
        </p>
    </div>

局部视图：

<tr>
@using (@Html.BeginCollectionItem("Liabilities")) {
    <td>
        @Html.DropDownListFor(model => model.Type, Model.Types, new { @class = "form-control selectpicker", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Balance, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Payment, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Interest, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Teams, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Tenure, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        <button class="btn btn-primary remove-button" type="button" data-id="@Model.ID">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </td>
}

添加功能

 $('.add-button').click(function () {
        var action = "/QuestionWizard/AddRow";
        $.ajax({
            url: action,
            cache: false,
            success: function (result) {
                $("#LibList").find("tbody").append($(result));
            }
        });
    });

所有这一切都很好。但是，我现在遇到的问题是，当添加新行时，css class“selectpicker”未应用于下拉列表。

我正在使用 bootstrap-select 来设计我的下拉菜单。这在应用程序的其他任何地方都可以正常工作。

请有人告诉我我做错了什么。

谢谢。

Answer 1

只需调用呈现选择器的函数：

  $('.selectpicker').selectpicker();

追加元素后：

$('.add-button').click(function () {
    var action = "/QuestionWizard/AddRow";
    $.ajax({
        url: action,
        cache: false,
        success: function (result) {
            $("#LibList").find("tbody").append($(result));
            $('.selectpicker').selectpicker();
        }
    });
});

编辑

正如@Stephen Muecke 在他的评论中建议的那样，最好只找到附加的元素并只呈现它的内容，而不是重新呈现所有选择器。

$("#LibList").find("tbody").find('.selectpicker').last().selectpicker();

从性能上来说当然更好

在动态添加的 table 行中丢失 css 样式

losing css style in dynamically added table rows

javascript

css

asp.net-mvc

asp.net-mvc-5

bootstrap-select