Ajax проверка результатов экзамена

Question

Я новичок в javascript, но мне действительно нужно программировать некоторые функции ajax. У меня есть сайт Joomla с компонентом экзаменов. Пользователь может загрузить экзамен, и это выглядит следующим образом:

<fieldset id="question1"> 
<div class="js-marker"> 
    <div class="pull-right bu_marker_wrapper"> 
     <label data-original-title="Если вы хотите вернуться к вопросу позже, поставьте галочку - и в конце теста вы увидите все отмеченные вами вопросы." class="hasTooltip positionLeft" data-toggle="tooltip" title="">Отметьте, чтобы проверить позже 
      <input class="js-marker" name="jform[responses][27476][response_marked]" value="1" data-marker-number="1" type="checkbox"> 
     </label> 
    </div> 
    <div style="clear: both;"></div> 
</div> 
<h2>Вопрос 1</h2> 
<div> 
    <p>Работающий пенсионер настаивает на предоставлении ему дополнительного отпуска без сохранения содержания, сроком до двух недель. Правомерны ли его требования</p> 
</div> 
<div class="bu-question_input"> 

    <ul class="unstyled"> 
     <li> 
      <label class="positionRight"> 
       <input class="problem mcq" name="jform[responses][27476][response_answers]" value="Работодатель на основании письменного заявления обязан предоставить ему отпуск" data-review-row-number="1" type="radio">Работодатель на основании письменного заявления обязан предоставить ему отпуск</label> 
     </li> 
     <li> 
      <label class="positionRight"> 
       <input class="problem mcq" name="jform[responses][27476][response_answers]" value="Работодатель может такой отпуск работнику не предоставить" data-review-row-number="1" type="radio">Работодатель может такой отпуск работнику не предоставить</label> 
     </li> 
     <li> 
      <label class="positionRight"> 
       <input class="problem mcq" name="jform[responses][27476][response_answers]" value="Вопрос решается в индивидуальном порядке, на усмотрение работодателя" data-review-row-number="1" type="radio">Вопрос решается в индивидуальном порядке, на усмотрение работодателя</label> 
     </li> 
    </ul> 
</div> 
<div class="spoiler-wrap"> 
    <div class="button spoiler-head folded">Показать подсказку</div> 
    <div style="display: none;" class="spoiler-body"> 
     <p>Подсказка</p> 
    </div> 
</div> 

и так далее.

Мне нужно показать результат вопроса сразу после нажатия переключателей. Я сделал сценарий ajax и могу получить правильный ответ на вопрос по ID в БД. Он возвращает его в формате json. Вот код:

<input id="numtest" type="text">\ 
<div id="try">Попробовать</div> 
<div id="result"></div> 
<script> 
     function show(id) 
     { 
      jQuery.ajax({ 
       url: "../com_babelu_exams/exams/checkresult.php?id=" + id, 
       datatype: 'json', 
       cache: false, 
       success: function(jsondata){ 
        var data = JSON.parse (jsondata); 
        jQuery("#result").html(data.question_answers); 
       } 
      }); 

     } 

     document.getElementById('try').onclick = function() { 
      show(document.getElementById('numtest').value); 
     }  
    </script> 

Это работает, но я действительно не знаю, как сделать это, показывая результат, нажав кнопки радио вопросов.

Answer 1

Попробуйте это, если ваша форма загружена через ajax или ваши разделы .bu-question_input загружены через ajax, вам необходимо передать делегат немного выше dom для прослушивания событий.

$('.bu-question_input').on('click' , 'input[type=radio]', function(e){ 
    show($(e.target).val()); 
}); 

Answer 2

Вызов функции на нужную кнопку радио проверил событие

вы должны упомянуть кнопку радио идентификатор, чтобы вызвать функцию show() определенную кнопку RADIO

<input class="problem mcq" id="radio_button" name="jform[responses][27476][response_answers]" value="Работодатель на основании письменного заявления обязан предоставить ему отпуск" data-review-row-number="1" type="radio"> 

затем добавить ниже сценария

if($('#radio_button').is(':checked')) 
{ 
     show(this.id); 
} 

, если вы хотите, чтобы вызвать функцию для всех радио-кнопки затем использовать этот

input[type="radio"] 

сценарий может быть

$(function() { 
     var $radioButtons = $('input[type="radio"]'); 
     $radioButtons.click(function() {  
       if($('input[type="radio"]').is(':checked')) 
    { 
      show(this.id); 
    }  
     }); 
    });