Почему Ajax после загрузки данных из бд не работает

134
11 ноября 2019, 22:40

У меня есть код страницы для выбора теста :

<div class="col-lg-12">
                        <div class="row row-grid text-center  center-block">
                            <div class="col-lg-4" style="margin-left: auto; margin-right: auto;">
                                <div class="card card-lift--hover shadow border-0">
                                    <div class="card-body py-5">
                                        <div class="icon icon-shape icon-shape-primary rounded-circle mb-4">
                                            <i class="ni ni-check-bold"></i>
                                        </div>
                                        <h6 class="text-primary text-uppercase">Выберите класс</h6>
                                        <button data-class="10" name="Class" value="10" class="btn btn-primary mt-4 class-select">10 класс</button>
                                        <button data-class="11" name="Class" value="11" class="btn btn-primary mt-4 class-select">11 класс</button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 subjects" style="display: none;">
                                <div class="card card-lift--hover shadow border-0">
                                    <div class="card-body py-5">
                                        <div class="icon icon-shape icon-shape-success rounded-circle mb-4">
                                            <i class="ni ni-istanbul"></i>
                                        </div>
                                        <h6 class="text-success text-uppercase">Выберите предмет</h6>
                                        <div id="subject-content" name="subject-content">
                                            <!--<button data-subject="2" name="SubjectId" id="S" value="2" class="btn btn-success mt-4  col-md-12 subject-select">Информатика</button>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 subjects" style="display: none; padding:0;">
                                <div class="col-lg-12 tests" style="display: none;">
                                    <div class="card card-lift--hover shadow border-0">
                                        <div class="card-body py-5">
                                            <div class="icon icon-shape icon-shape-warning rounded-circle mb-4">
                                                <i class="ni ni-planet"></i>
                                                <!--<input type="hidden" value="Int32.Parse(HttpContext.Current.Request.Cookies["Form"].Value)" name="Form">-->
                                            </div>
                                            <h6 class="text-warning text-uppercase">Выбери тест</h6>
                                            <div id="tests-content"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

далее идёт запрос в бд через ajax для вставки кода в элемент subject-content:

$('#username').html(getCookie('Name'));
        $('.class-select').on('click', function () {
            $('.subjects').fadeIn(500);
            var studentClass = $(this).attr('data-class');
            setCookie('Form', studentClass);
            $.ajax({
                url: 'Home/AjaxUpdateListSubjects?Form=' + studentClass, success: function (data) {
                    $('#subject-content').html(data).fadeIn(500);
                }
            });
        });

где Метод действия контроллера :

[HttpGet]
    public ActionResult AjaxUpdateListSubjects(int Form)
    {
        HttpContext.Response.Cookies["Form"].Value = Form.ToString();
        var ListUpdate = test.Subjects.Where(m => m.Form == Form).ToArray();
        return PartialView("ListPartial", ListUpdate);
    }

и Partial View :

@model IEnumerable<ASP.NET_Test_Application.Models.Subject>
@{ 
    foreach (var subject in Model)
    {
        <button data-subject="@subject.Id" name="SubjectId" value="@subject.Id" class="btn btn-success mt-4 subject-select col-md-12">@subject.SubjectName</button>
    }    
}

но потом должен выполняться второй Ajax запрос на вставку тестов :

  $('.subject-select').on('click', function () {
        console.log('tests');
        $('.tests').fadeIn(500);
        var subject = $(this).attr('data-subject');
        $.ajax({
            url: 'Home/AjaxUpdateListTests?Form=' + getCookie('Form') + '&SubjectId=' + subject, success: function (data) {
                console.log(data);
                $('#tests-content').html(data).fadeIn(500);
            }
        });
    });

Где метод действия контроллера :

 [HttpGet]
        public ActionResult AjaxUpdateListTests(int Form ,int SubjectId )
        {
            Session["List"] = test.Test.Where(m => m.Form == Form).Where(m => m.SubjectId == SubjectId).ToList();
            return PartialView("TestPartial", Session["List"]);
        }

и Partial View :

@model List<ASP.NET_Test_Application.Models.Test>
@foreach (var test in Model)
{
   <a href="#" name="" class="btn btn-warning mt-4">@test.TestName</a>
}

Но дело в том что второй ajax-запрос не работает.... Буду благодарен за любую помощь....

Answer 1

Потому что в момент назначения обработчика

$('.subject-select').on('click', function () {

элементов с .subject-select еще нет.

$('#subject-content').on('click', '.subject-select', function () {
READ ALSO
Есть способ получше (Fixed blur-effect container)?

Есть способ получше (Fixed blur-effect container)?

Я нашел способ создать фиксированный контейнер с blur-эффектом, как оказалось способ простой, но достаточно страшныйЧто будет с индексацией...

137
Сравнение массивов в js

Сравнение массивов в js

Вернет true, почему?

114
Почему может не срабатывать JQuery

Почему может не срабатывать JQuery

почему не срабатывает у меня Jquery? Вот есть функция

132
Проверка свойства объекта

Проверка свойства объекта

Как сделать так, чтобы при нажатии отмены в prompt цикл прекращался?

152