PHP пока l oop кнопка отправки не работает в AJAX

Question

У меня есть PHP, а l oop, который получает test_id для тестов от mysql дБ и создает кнопку для каждого уникального test_id. Таким образом, все тесты отображаются на странице следующим образом:

не может загрузить изображение, чтобы оно было на imgur.com список тестов

Мой метод отображения тестов и Нажатие кнопки захвата выглядит следующим образом: 1. txtHint отображает список викторин. 2. Take-Quiz - это идентификатор кнопки. 3. Идентификатор test_id отправляется с использованием скрытого типа ввода с уникальным идентификатором test_id, который меняется с каждым, пока l oop.

$.ajax({

                    type: "POST",crossDomain: true, cache: false,
                    url: url,
                    data: loginString,
                    success: function(data1){
                            localStorage.loginstatus = "true";
                     $("#txtHint").html(data1);

                    $("#take-quiz").click(function(){


                            // update profile.php,
                            var test_id= $.trim($("#test_id").val());


                            localStorage.setItem("test_id", test_id);
                            window.location.href = "take-quiz.html";


               });

                }
                });

Вот некоторый код php в то время как l oop, который показывает кнопку и скрытый test_id

$createTable .= '<input type="hidden" value="';
    $createTable .= $row['id'];
    $createTable .= '"  id="test_id" />';
    $createTable .= '<input type="submit" value="Take Quiz " name="take-quiz" id="take-quiz" class="btn btn-primary"/>';

Этот список отображается с использованием элемента AJAX html. когда я пытаюсь нажимать на кнопки, работает только первая кнопка результата, другие ничего не делают. Если я пытаюсь привязать событие click к документу, каждая кнопка работает, но я получаю один и тот же test_id для каждой кнопки.

$(document).on('click', '#take-quiz', function(e) {
    alert(...);
});

Я посмотрел на другой вопрос о SO, который является дубликатом: Не могу нажать На кнопке on загружено ajax, но я не могу ее исправить, чтобы устранить мои ошибки.

Может кто-нибудь пролить свет на то, что я делаю неправильно?

Большое спасибо.

Answer 1

Сначала замените ваш дубликат IDS классом. IDS должен быть уникальным для каждой страницы и не дублироваться. Во-вторых, вы захотите изменить свой обработчик кликов, чтобы учесть класс, а также удалить его из ajax.

$createTable .= '<input type="hidden" value="';
    $createTable .= $row['id'];
    $createTable .= '"  class="test_id" />';
    $createTable .= '<input type="submit" value="Take Quiz " name="take-quiz" class="btn btn-primary take-quiz"/>';



  $.ajax({
    type: "POST",crossDomain: true, cache: false,
    url: url,
    data: loginString,
    success: function(data1){
        localStorage.loginstatus = "true";
        $("#txtHint").html(data1);
    }
});

$(document).on("click",".take-quiz",function(){
    var test_id= $.trim($(this).prev().val());
    localStorage.setItem("test_id", test_id);
    window.location.href = "take-quiz.html";
});