Конфликт между кодами JavaScript

Question

Я создаю веб-приложение, в котором главная страница является временной шкалой, и эта временная шкала должна автоматически обновлять свое содержимое.Я использую функцию setTimeOut в JQuery для обновления временной шкалы каждые x секунд.

Но у меня также есть другой код JavaScript для отображения скрытых элементов этого элемента при нажатии на элемент div.

ДваКод отлично работает, когда один, за исключением случаев, когда я пытаюсь использовать оба на странице. Ошибка выглядит следующим образом После обновления временной шкалы с помощью setTimeOut второй код (нажатие на элемент div для отображения / скрытия элементов) больше не работает.Я пытался решить ее несколькими способами, но не смог, а также не нашел решений.Кто-нибудь знает, что это может быть? Я также принимаю советы о том, как обновить свою временную шкалу, например, обновлять только при наличии новых записей об элементах, а не каждые x секунд.

setTimeout("my_function();", 9000);
    function my_function() {
      $('#timeline').load(location.href + ' #timeline')
    }

$(document).ready(function () {
      var itemsDivs = document.querySelectorAll('.timeline-item');
      itemsDivs.forEach(function (itemsDiv) {

        itemsDiv.addEventListener('click', function () {
          var itemId = this.getAttribute('item-id')
          var display = document.getElementById('comment-form-' + itemId).style.display
          if (display == 'none')
            document.getElementById('comment-form-' + itemId).style.display = 'block'
          else
            document.getElementById('comment-form-' + itemId).style.display = 'none'
        })
      })
    })

<div class="container-fluid">
    <div class="row example-basic">
      <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
        <ul class="timeline" id="timeline">
          {% for item in items %}
          <li item-id={{item.id}} class="timeline-item">
            <div class="timeline-info">
              <span>{{item.data.strftime('%c')}}</span>
            </div>
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3 class="timeline-title">{{item.analista}} recomenda {{item.ativo}} a R${{item.preco}}.</h3>
              <p>Fonte:{{item.fonte}}</p>
            </div>
            <div id="comment-form-{{ item.id }}" style="display: none;">
              {{item.coments}} <br><span id='dataalvo'>Data Alvo: {{item.dataalvo}}</span>
            </div>
          </li>
          {% endfor %}
          <li class="timeline-item period">
            <div class="timeline-info"></div>
            <div class="timeline-marker"></div>
          </li>
        </ul>
      </div>
    </div>

Answer 1

Возможно, причина в том, что: ваше событие div прикреплено к документу. Уже через x секунд выполняется my_function, элемент div исходного элемента удаляется со страницы, а элемент div нового элемента не присоединяется к событию. Итак, связать событие div в $ ('# timeline'). Загруженное событие.

Answer 2

Вы должны заново зарегистрировать своих слушателей событий.

Прослушиватели событий в Javascript подключаются не к селектору, а к самим фактическим элементам.document.querySelectorAll('.timeline-item') выбирает все элементы DOM, которые в настоящее время имеют селектор .timeline-item.Через 9 секунд (согласно вашей setTimeout функции) вы удаляете все свои .timeline-item s и получаете новые самые последние (load() удаляет весь внутренний HTML и заменяет его новым HTML )

Если вы хотите, чтобы у этих недавно добавленных .timeline-item s были прослушиватели событий, вам нужно добавить их.Нечто подобное может работать для вас:

setTimeout(function() {
  // Register event listeners again after the load is complete
  $('#timeline').load(location.href + ' #timeline', function() {
    registerEventListeners();
  });
}, 9000);

// Register event listeners once the document is finished loading
$(document).ready(function () {
  registerEventListeners();
});

/**
 * Registers event listeners to all `.timeline-item` elements.
 */
function registerEventListeners() {
  var itemsDivs = document.querySelectorAll('.timeline-item');
  itemsDivs.forEach(function (itemsDiv) {

    itemsDiv.addEventListener('click', function () {
      var itemId = this.getAttribute('item-id')
      var display = document.getElementById('comment-form-' + itemId).style.display
      if (display == 'none')
        document.getElementById('comment-form-' + itemId).style.display = 'block'
      else
        document.getElementById('comment-form-' + itemId).style.display = 'none'
    })
  })
}