losing css style in dynamically added table rows

Vote count:

0

I've read a lot about adding and removing rows from tables dynamically. I'm very sure I have done everything the right way.

my view:

 <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>

Partial View:

<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 function

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

All of this works fine. However, the problem I'm having now is that when a new row is added, the css class "selectpicker' is not applied to the dropdown.

I'm using bootstrap-select to style my dropdown. this works fine everywhere else in the application.

Please can someone tell me what I'm doing wrong.

Thanks.

asked 21 secs ago

capiono

67

losing css style in dynamically added table rows