从ajax请求动态生成的单选按钮获取值

Question

我根据每个候选人的每个位置生成了带名字的单选按钮。现在问题是获得每个单选按钮的值。我的代码是这样的;

 $("#btn-vote").click(function() {

    $.ajax({
        url: 'admin/requests/Get-Positions.php',
        method: 'POST',
        data: { id : id },
        dataType: 'json',
        success: function(result) {

            var textToInsert = '';

            $.each(result, function(key, value)
            {
                var position_id = value['id'];

                $.ajax({
                    url: 'admin/requests/Get-Candidate_Per_Position.php',
                    method: 'POST',
                    data: { position_id : position_id },
                    dataType: 'json',
                    success: function(data) {

                        textToInsert += '<div class="card bg-primary text-center"><div class="card-body"><h4 class="text-white m-0" id="position">'+ value['position'] +'</h4></div></div><br><div class="row">';

                        $.each(data, function(key, value)
                        {
                            textToInsert += '<div class="col-lg-3 col-sm-6 text-center mb-4"><img class="rounded-circle img-responsive d-block mx-auto" src="admin/img/'+ value['photo'] +'" width="150" height="150"><br><span class="lead">'+ value['first_name'] +'</span><div class="form-check"><label class="form-check-label"><input type="radio" class="form-check-input" name="position'+ value['position_id'] +'" value="'+ value['id'] +'"></label></div></div>';
                        });

                        textToInsert += '</div>';

                        $('#candidate_list2').html(textToInsert);

                    }

                });
            });
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseWithJSON)
        }
    });

});

单选按钮在第二个ajax请求时生成，其名称如position +每个位置的ID。

感谢您的时间。任何帮助将不胜感激。

Answer 1

将您的单选按钮设为同一类。并点击事件到该类，当您单击时，使用$(this)获取当前所选单选按钮的值。

<input type="radio" class="form-check-input candidate" name="position'+ value['position_id'] +'" value="'+ value['id'] +'">

var textToInsert = '';
    var results = [{id: 23, position: 'Group1'}, {id: 13, position: 'Group2'}];
    var candidate = [{photo: 'https://www.thesun.co.uk/wp-content/uploads/2017/09/nintchdbpict0003560781641.jpg', first_name: 'Michaela', id: 45}, {photo: 'https://media2.s-nbcnews.com/j/newscms/2016_11/1463891/160318-jill-stein-green-party-yh-1145a_b279e0d0c484f5624e923917d4c42546.nbcnews-ux-2880-1000.jpg', first_name: 'Jill', id: 25}, {photo: 'https://d3i6fh83elv35t.cloudfront.net/newshour/app/uploads/2015/07/RTR4XVGV-1024x683.jpg', first_name: 'John', id: 65}];
    $('#btn-vote').on('click', function(){
        $.each(results, function (key, value) {
            var position_id = value['id'];
            var position = value['position'];
            textToInsert += '<div class="card bg-primary text-center"><div class="card-body"><h4 class="text-white m-0" id="position">'+ value['position'] +'</h4></div></div><br><div class="row">';

            $.each(candidate, function(key, value)
            {
                candidate[key].position_id = position_id;
                textToInsert += '<div class="col-lg-3 col-sm-6 text-center mb-4"><img class="rounded-circle img-responsive d-block mx-auto" src="'+ value['photo'] +'" width="150" height="150"><br><span class="lead">'+ value['first_name'] +'</span><div class="form-check"><label class="form-check-label"><input type="radio" data-position="' + position + '" class="form-check-input candidate" name="position'+ value['position_id'] +'" value="'+ (value['id'] + position_id) +'"></label></div></div>';
            });

            textToInsert += '</div>';

            $('#candidate_list2').html(textToInsert);
        });

    });




   // get value from checked radio buttons

    $('#btn-results').on('click', function(){
        var results = {};
        $("input:radio.candidate:checked").each(function() {
            results[$(this).data('position')] = $(this).val();
        });
        console.log(results);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-vote">Vote</button>
<button id="btn-results">Get results</button>
<div id="candidate_list2"></div>