JS сгенерированная проблема DIV с привязками клавиш

Question

Моя программа генерирует модал с каруселью внутри при нажатии кнопки.
Изображения для карусели запрашиваются из БД, поскольку может быть разное количество изображений, элементы div для карусели создаются динамически.

Проблема возникает, когда элемент div генерируется на кнопке щелчок, тогда сочетания клавиш и за пределами модальных щелчков не работают. Нет проблем, когда элементы div генерируются во время создания экземпляра.

Кажется, у меня есть проблема с созданием экземпляра.

Код краткого содержания: http://jsfiddle.net/q7c8v06p/1/

var imgsrc_array = [];

//x1
function create_modal_layout() {
  imgsrc_array = ["Image/nature.jpg", "Image/snow.jpg", "Image/mountains.jpg"];
  var img_array = new Array(imgsrc_array.length);

  for (var i = 0; i < imgsrc_array.length; i++) {
    var j = i + 1;
    var img1 = document.createElement("IMG");
    img1.setAttribute("src", imgsrc_array[i]);
    img1.setAttribute("alt", "Nr. " + i);
    img1.setAttribute("onclick", "currentDiv(" + j + ")");
    img1.setAttribute("class", "demo w3-opacity w3-hover-opacity-off r_selection");
    img1.setAttribute("style", "width: 100%");
    img_array[i] = img1;
  }
  
  //sets % per element
  var a = Math.floor(100 / imgsrc_array.length);

  for (var i = 0; i < imgsrc_array.length; i++) {
    var div0 = document.createElement("DIV");
    if (i === 0) {
      div0.setAttribute("class", "w3-col top_img1");
      div0.setAttribute("style", "width:20%;height:30%");
    } else {
      div0.setAttribute("class", "w3-col");
      div0.setAttribute("style", "width:" + a + "%;height:30%");
    }
    div0.appendChild(img_array[i]);
    document.getElementById("imagetest0").appendChild(div0);
  }
  //x1
}
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//modal functions

function openModal(id) {
  document.getElementById(id).style.display = "block";
  //alert(document.getElementById('hidden2').value)
}

function closeModal(id1) {
  document.getElementById(id1).style.display = "none";
  //alert(document.getElementById('hidden2').value)
  if (id1 === "id01")
    $("#imagetest0").empty();
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  //alert("plus "+n);
  showDivs(+slideIndex + n);
}

function currentDiv(n) {
  //alert("current "+n);
  showDivs(slideIndex = n);
}

function showDivs(n) {
  //alert("show "+n);
  slideIndex = n;
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(
      " w3-opacity-off r_test", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-opacity-off r_test";
  document.getElementById("hidden1").value = x[slideIndex - 1].alt;
  document.getElementById("hidden2").value = slideIndex;
}

function openModal2(i) {

  document.getElementById('extra1').src = imgsrc_array[i];
  document.getElementById('id02').style.display = "block";
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//z1
//key binding
$(document).ready(function() {
  $('body').keyup(function(event) {

    var key = event.keyCode;

    if (key === 37) //left arrow
    {
      plusDivs(-1);
    } else if (key === 39) //right arrow
    {
      plusDivs(1);
    } else if (key === 27) //esc
    {
      if (document.getElementById('id02').style.display === 'block') {
        closeModal('id02');
      } else if (document.getElementById('id01').style.display === 'block') {
        closeModal('id01');
      }
    } else if (key === 13) //enter
    {
      if (document.getElementById('id02').style.display === 'block') {} else if (document.getElementById('id01').style.display === 'block')
        ajax_call1('but1');
    } else if (key === 32) //space
    {
      if (document.getElementById('id01').style.display === 'block')
        openModal2(document.getElementById("hidden2").value - 1);
    }
  })
});

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// z1
//click outside of modal to esc

// Get the modal
var modal = document.getElementById('id01');
var modal2 = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal2) {
    modal2.style.display = "none";
  } else if (event.target == modal) {
    modal.style.display = "none";
  }
}

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

.mySlides {
  display: none
}

.frame {
  width: 60%;
  height: 92%;
  border: 3px solid #ccc;
  background: #938c8c;
  margin: auto;
  padding: auto;
}

.frame2 {
  width: 60%;
  height: 92%;
  border: 3px solid #ccc;
  background: white;
  margin: auto;
  padding: auto;
}

.modal_buttons {
  border-radius: 8px;
  margin: 8px;
}

.r_selection {
  border-color: transparent;
  border-width: 5px;
  border-style: solid;
}

.r_selection:hover {
  border-color: #78FF33;
  /*green */
}

.set_height {
  top: 67%;
}

.r_test {
  border-color: #FFDD43;
  /* red */
}

.extra_info {
  border-color: gray;
  border-width: 10px;
  border-style: solid;
  margin: auto;
  padding: auto;
  width: 100%;
  height: 100%;
}

В коде:
x1: в html окне: есть функция нажатия кнопки
x1: в js окне: есть функция
z1: в js окне: сочетания клавиш и щелчок вне модального события

Спасибо за помощь заранее

Answer 1

Это была проблема с созданием экземпляра. Пришлось сгенерировать div до того, как будет найден груз.