javascript - マテリアル デザインのフローティング ラベルが、AJAX をロードした Bootstrap モーダルで機能しないのはなぜですか?

Question

私はかなり典型的な Boostrap Modal を持っています:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create New Customer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mb-1 pb-1 ">
                <form asp-page-handler="CustomerModalPartial"  >
                    <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                    <input name="Id" type="hidden" value="@ViewData.Model.Id" />
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="Name" class="bmd-label-floating" for="input-name">Company Name</label>
                        <input asp-for="Name" class="form-control" type="text" id="input-name" />
                        <span asp-validation-for="Name" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="ContactName" class="bmd-label-floating" for="input-contactName">Customer Name</label>
                        <input asp-for="ContactName" class="form-control" type="text" id="input-contactName" />
                        <span asp-validation-for="ContactName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="ContactEmail" class="bmd-label-floating" for="input-contactEmail">Customer Email</label>
                        <input asp-for="ContactEmail" class="form-control" type="email" id="input-contactEmail" />
                        <span asp-validation-for="ContactEmail" class="text-danger"></span>
                    </div>
                </form>
                <div class="modal-footer mr-0 pr-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-save="modal" id="submitButton">Create</button>
                </div>
            </div>
        </div>
    </div>
</div>

partialビアをロードします

 $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data("url");
        $.get(url).done(function(data) {
            placeholderElement.html(data);
            placeholderElement.find(".modal").modal("show");
        });
    });

ボタン/プレースホルダーの設定を次のように使用します。

<div style="position: fixed;bottom: 20px;right: 20px;">
    <button type="button" class="btn btn-primary bmd-btn-fab" data-toggle="ajax-modal" data-url="@Url.Page("Index", "CustomerModalPartial")">+</button>
</div>

<form method="get">
    <div class="form-group">
        <label for="search" class="bmd-label-floating">Search</label>
        <input type="text" class="form-control" id="search" name="currentFilter" value="@Model.CurrentFilter">
        <span class="bmd-help">Search against the customer name, ...</span>
    </div>
    <input type="submit" style="display: none"/>
</form>

<!-- Modal placeholder -->
<div id="modal-placeholder"></div>

ただし、私のラベルは浮かびません:

モーダルを表示するページにフローティング検索があるため、MD Bootstrap が正しく読み込まれていることを確認しました。

モーダルにフローティング ラベルがないのはなぜですか?

補足として、マテリアル デザインのブートストラップからチェックボックスなどを取得できないことにも気付きました。何かが足りない気がします。考え？