0

Есть трехмерный массив в котором лежат картинки к вопросам, сами вопросы и варианты ответов на них. При первом нажатии скрипт отрабатывает, дальше перестает работать (консоль ошибок не выдает).

$(document).ready(function(){
	var Question = [ // Трехмерный массив с данными
	          ["image1.jpg","Вопрос 1",["Да","Нет"]],
	          ["image2.jpg","Вопрос 2",["Разрешено","Запрещено","Затрудняюсь ответить"]],
	          ["image3.jpg","Вопрос 3",["Первый вариант","Второй вариант","Третий"]],
	          ["image4.jpg","Вопрос 4",["Да","Нет"]]
	    	];

	 var image = document.getElementById("image"); // Получаем элемент img
	 var question = document.getElementById("question"); // Получаем элемент div
	 var variantAnswer = document.getElementById("variant"); // Получаем элемент ol
			
	 var i = 0; // Счетчик 1
	 var j = 0; // Счетчик 2

			image.src= Question[i][0];// Выводим первую картинку
			image.alt= Question[i][0];// Для наглядности чтобы не подгружать картинки
			question.innerHTML = Question[i][1];// Выводим 1 вопрос
			while(j<Question[i][2].length){// Выводим первые ответы
			    variantAnswer.innerHTML += "<li>"+Question[i][2][j]+"</li>";
			    j++;
			}

			$("#variant li").click(function(){// При нажатии на ответ
			    i++;// Увеличиваем счетчик
			    j = 0;// Обнуляем счетчик
			    image.src= Question[i][0];// Меняем картинку
			    image.alt= Question[i][0];// Для наглядности чтобы не подгружать картинки
			    question.innerHTML = Question[i][1];// Меняем вопрос
			    variantAnswer.innerHTML = "";// Очищаем поле с ответами
			    while(j<Question[i][2].length){// Выводим новые ответы
			        variantAnswer.innerHTML += "<li>"+Question[i][2][j]+"</li>";
			        j++;
			    }
			});
		});
img, ol li {margin-bottom: 10px;}
ol li {cursor: pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="image" src="" alt="">
	<div id="question"></div>
	<ol id="variant"></ol>

0

1 ответ 1

0

Потому что вы задаёте действие не созданным ещё элементам. Слушайте всё DOM дерево:

Поменяйте:

$("#variant li").click(function(){// При нажатии на ответ

На

$(document).on("click", "#variant li", function(){// При нажатии на ответ
1
  • Вау!!! Спасибо))) Так долго не мог понять в чем дело. Помогло! 23 мая 2019 в 8:14

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.