Не привязывается событие click после Ajax ответа

Question

После ajax ответа не работает событие click

Код запроса

$(".specSelect button").on("click", function (e) {
        var specId = $(this).data("spec");
        $.ajax({
            type: "POST",
            url: "Home/GetDoctors",
            data: "roleId=" + specId,
            async: false,
            success: function (html) {
                modal.style.display = "block";
                $(".doctorList").replaceWith(html);
                $("#SelectedRole").val(specId);
            }
        });
    });

Ответ (Asp.Net Mvc)

div class="doctorList">
@foreach (DoctorModel doctor in Model.Doctors)
{
    <button class="docBtn"data-doctor="@doctor.DoctorId">@doctor.Name</button>
}
</div>

Как я пытаюсь привязать событие:

$(".doctorList").on("click", ".docBtn", function(e) {
        var docId = $(this).data("doctor");
        $("#SelectedDoctor").val(docId);
        });

Собственно прилетают кнопочки, при нажатии на них ничего не происходит. Что здесь не так ?

Answer 1

В данном случае мне помогла привязка события непосредственно в ответе ajax:

$(".specSelect button").on("click", function (e) {
        var specId = $(this).data("spec");
        $.ajax({
            type: "POST",
            url: "Home/GetDoctors",
            data: "roleId=" + specId,
            async: false,
            success: function (html) {
                modal.style.display = "block";
                $(".doctorList").replaceWith(html);
                $(".doctorList button").on("click", function (e) {
                    $("#SelectedDoctor").val($(this).data("doctor"));
                });
                $("#SelectedRole").val(specId);
            }
        });
    });

БЛОГ НА HUSL

Не привязывается событие click после Ajax ответа

Ответы (1 шт):