JQuery / AJAX - Async представление - eventlisteners не отвечает и .remove() не соблюдает выбор

это мой первый опыт написания JQuery/AJAX и (глупый я) я пытаюсь сделать что-то довольно сложное на самом деле (или по крайней мере это для меня lol).

По сути, я делаю бесконечную карусель. Я отправляю данные, разбитые на страницы, через представление Django, и использую JQuery для асинхронной загрузки (чтобы не обновлять страницу постоянно и не терять предыдущее содержимое).

Вот соответствующий код (я не включаю код, связанный с django, потому что все там работает просто отлично, проблема в HTML/JS. Однако если вы хотите взглянуть на него, просто дайте мне знать)

HTML

<main>
  <div id="outside-container">
    <div id="inside-container" class="infinite-container">
      
      {% for city in cities %}
      {% get_weather city.name 'metric' 'it' as weather_info %}

      <div class="items">
        <div class="data-div">
          <ul>
            <li><b>{% destructure weather_info 'location' 'city' %}</b> </li>
            <li class="weather">{% destructure weather_info 'weather' 'description' %}</li>
            <img src="{% destructure weather_info 'weather' 'icon' %}">
            <li>{% destructure weather_info 'main' 'temperature' %}</li>
            <li>{% destructure weather_info 'location' 'time'%}</li>
          </ul>
        </div>
        <img loading="lazy" class="carousel-img" src="{{city.image.url}}">
      </div>

      {% endfor %}
      
    </div>
  </div>

  <div id="directions">
    <a id="right-button">Right</a>
    
    <a id="next-slide" href="?page=2">Next</a>
    
  </div>
</main>

CSS

body {
  margin: 0;
  padding: 0;
    background: linear-gradient(-45deg, #4699f8, #fff2f7, #23a6d5, #1779e9);
    background-size: 400% 400%;
    animation: /* gradient */ 15s ease infinite;
    height: 57vh;
}

.main {
  background-image: radial-gradient(black, rgba(48, 48, 48, 0.349));
}

#outside-container{
  display: block;
  width: 800px;
  height: 60vh;
  /* border-right: solid 14vw;
  border-left: solid 14vw;
  border-color: rgba(22, 22, 22, 0.603); */
  border-radius: 5px;
  /* overflow: hidden; */
  margin: 0 auto;
}

#inside-container{
  display: flex;
  width: calc(800px * 14);
  height: 100%;
  overflow: hidden;
}

.items{
  position: relative;
  margin: 0px;
  width: 800px;
  height: 100%;

  display: flex;
  justify-content: end;
  align-items: end;
}

.animate {
  transition: transform 1s;
}


.carousel-img {
  width: 100%;
  height: 100%;
}

/* Data*/

.data-div {
  position: absolute;
  margin: 3rem 2rem;
  overflow: hidden;
  padding-right: 3rem;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 1.2rem;
  background-color: rgb(0, 0, 0, .5);
  border-radius: 15%;
  z-index: 10;
  opacity: 1;
  transition: opacity 1s;
}

.data-div li {
  list-style: none;
}

.weather {
  font-size: 1rem;
  font-weight: 300;
}

#right-button{
  display: inline-block;
  cursor: pointer;
  margin: 10px;
}

и JS/JQuery

const rightBtn = document.querySelector('#right-button')
const insideContainer = document.querySelector('#inside-container')
let outsideContainerWidth = document.getElementById('outside-container').offsetWidth
const animate = document.querySelector('.animate')

$( document ).ready(function() {
  var count = 2;
  const getPage = url => {        
    return $.ajax({
        type: 'GET',
        url: url,
    })
  }

  $('#next-slide').on('click', function (e) {
  
    if (count > num_pages) {
      count = 1
    };
  
    e.preventDefault();
    this.href = `?page=${count}`;
    getPage(this.href) 
    .done(function (data) {
      $(insideContainer).append($(data).find('.items'));
    }).fail(function (jqXHR, statusText, err) {
      console.log(err);
    });
    
    setTimeout(function() {
      count++;
      $('.items:last').find('.carousel-img').on('load', function() {
        $('#next-slide').trigger('click')
      })
    }, 150);
  })


  $(rightBtn).on('click', function() {

    $(insideContainer).toggleClass('animate');
    $(insideContainer).css('transform', `translateX(-${outsideContainerWidth}px)`);

    $(insideContainer).on('transitionend webkitTransitionEnd oTransitionEnd', function (e) {
        $(insideContainer).removeClass('animate')
        $(insideContainer).css('transform', 'translateX(0)')

        $('.items:first').remove()
      
  });
});
})

Я пытаюсь достичь следующего:

1. заставить следующую функцию вызываться самостоятельно, как только последнее изображение на карусели закончит загрузку соответствующего кода:

$('.items:last').find('.carousel-img').on('load', function() {
        $('#next-slide').trigger('click')
      })

2. У меня возникают проблемы, когда я удаляю первый элемент карусели после загрузки новых изображений. Другими словами, когда я вызываю эту функцию (которая в конечном итоге будет подключена к таймеру)

$(rightBtn).on('click', function() {

    $(insideContainer).toggleClass('animate');
    $(insideContainer).css('transform', `translateX(-${outsideContainerWidth}px)`);

    $(insideContainer).on('transitionend webkitTransitionEnd oTransitionEnd', function (e) {
        $(insideContainer).removeClass('animate')
        $(insideContainer).css('transform', 'translateX(0)')

        $('.items:first').remove()
      
  });
});

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

Надеюсь, я был достаточно ясен и надеюсь, что не отниму у вас слишком много времени.

Заранее большое спасибо, и если что-то неясно, дайте мне знать, я отвечу как можно скорее.

Желаю хорошего дня :)

Вернуться на верх