PHP 循环提交按钮在 AJAX 中不起作用

Question

I have a PHP while loop which gets test_id for quizzes from mysql db and creates button for each unique test_id. So all quizzes show up on a page as follows:

cant upload an image so it's on imgur.com list of quizzes

My method for displaying the quizzes and to capture button click is as follows: 1. txtHint displays the quiz list 2. take-quiz is button id 3. test_id is sent using a hidden input type which has unique test_id which changes with each while loop.

$.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";


               });

                }
                });

Here is some php code within while loop which shows the button and hidden 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"/>';

This list is displayed using AJAX html element. when I try to click the buttons only the first result button works, others don't do anything. If i try to bind the click event to the document each button works but I get the same test_id for each button.

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

I looked at another question on SO which is a duplicate: Cant click on button with is loaded with ajax but I cannot get it to resolve my errors.

Can someone please shed some light on what I am doing wrong?

Many thanks.

Answer 1

First, replace your duplicate IDS with a class. IDS must be unique per page and not duplicated. Second, you will want to change your click handler to take into consideration the class as well as remove it from the 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";
});