Что делать, когда функция вызывает динамически созданный элемент?

Question

Я попытался прочитать мою проблему и собрать делегирование событий и / или слушателей событий, похоже, что мне нужно сделать. Однако я запутался в реализации моего сценария, поэтому помощь была бы признательна.

Я вижу проблему, вероятно, в том, что функция showSlides ссылается на mySlides и grid-box, которые являются динамически создаваемыми элементами, которые еще не были создается при вызове функции. Это правильно? Это средство просмотра слайдов для контекста, которое работало, когда я не создавал элементы динамически.

В верхнем разделе я не делал элементы HTML динамически, и это работало.

    var num_slides = 3
     
    for (let i=1; i<num_slides; i++) {
     
    var $my_slides= $("<div><img style = 'width:100%'/></div>", {"class": "mySlides"});
    $('#slideshow-container').prepend($my_slides);
     
    var $grid_box = $("<div><img/></div>", {"class": "grid-box"});
    //  $(document).on('click','div.grid-box',currentSlide(i));    ​// I've tried this
    $grid_box.on('click', function(event){currentSlide(i)}); 
    $('#picture-grid').append($grid_box);
     
    }
     
    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var gridboxes = document.getElementsByClassName("grid-box");
      if (n > slides.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";  
      }
     
      for (i = 0; i < gridboxes.length; i++) {
        gridboxes[i].classList.remove("active");
      }
      slides[slideIndex-1].style.display = "block";  
      gridboxes[slideIndex-1].className += " active";
    }
     
    var slideIndex = 1;
    showSlides(slideIndex);
     
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }
     
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

document.onkeydown = function(event) {switch (event.keyCode) {case 37:currentSlide(slideIndex-1);break;case 39:currentSlide(slideIndex+1);break;}};
     
    function onChangeMap(){
     
      const met_var = this.value;
      const basepath = '/home/2015_casestudy/';
      var startYear = 2014;
      var startMon = 1;
     
      document.querySelectorAll('.mySlides img').forEach(function(img, index){
     
        if ((startMon + index) % 12 == 0) {
          monthNum = 12;
          yearNum = startYear + ((startMon+index) / 12) - 1;
        } else {
          monthNum = (startMon+index) % 12
          yearNum = Math.floor(startYear + ((startMon+index) / 12));
        }
     
        var formattedMonthNum = ("0" + monthNum.toString()).slice(-2);
     
        var dateTag = yearNum.toString() + formattedMonthNum
     
        if ((met_var == 'sm_anom_1month' || met_var == 'sm_pct_1month') && (yearNum == 2014)) {
        img.src = basepath + "blank.png";
        } else {
        img.src = basepath + met_var + '_' + dateTag + "?" + new Date().getTime();}
      })
     
      document.querySelectorAll('.picture-grid img').forEach(function(img, index){
     
        if ((startMon + index) % 12 == 0) {
          monthNum = 12;
          yearNum = startYear + ((startMon+index) / 12) - 1;
        } else {
          monthNum = (startMon+index) % 12
          yearNum = Math.floor(startYear + ((startMon+index) / 12));
        }
     
        var formattedMonthNum = ("0" + monthNum.toString()).slice(-2);
     
        var dateTag = yearNum.toString() + formattedMonthNum
     
        if ((met_var == 'sm_anom_1month' || met_var == 'sm_pct_1month') && (yearNum == 2014)) {
          img.src = basepath + "blank.png";
        } else {
          img.src = basepath + met_var + '_' + dateTag +  "?" + new Date().getTime();}
        })
      }
     
    window.addEventListener("load",
    initPage);
     
    function initPage(){
    document.querySelector('#myFormSelect').addEventListener("change", onChangeMap);
    document.querySelector('#myFormSelect').dispatchEvent(new Event('change'));
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" 
        type="text/javascript" charset="utf-8"></script>

<select id="myFormSelect" name="met variables">
<option value="temp" selected='selected'>Temp</option>
<option value="rain">Rainfall</option>
</select>
    
    <div id="slideshow-container" class="slideshow-container">
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    
    <div id="picture-grid" class="picture-grid"></div>

Answer 1

Там, где вы созданы, они могут работать одновременно с вашим кодом.

Убедитесь, что они созданы до того, как у вас есть код. Также представляется, что код ссылается на div с указанным c классом. Когда вы создаете div в al oop, не забудьте добавить соответствующий класс, соответствующий тому, что пытается найти код.

Код также не может найти div, потому что он создан в неподходящее время, или у них просто нет правильных имен идентификаторов / классов.

    var $grid_box = $("<div><img/></div>", {"class": "grid-box"});

Вот ваша рабочая версия: с отсутствующим именем класса +. правильные вызовы onClick внутри приложения

    var $grid_box = $("<div class='grid-box' onclick='javascript:currentSlide(' + i + ')'><img/></div>');