javascript - javascript代码之间的冲突

Question

我正在创建一个 Web 应用程序，其中主页是一个时间轴，这个时间轴应该自动更新其内容。我正在使用 JQuery 的 setTimeOut 函数每 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

您必须重新注册您的事件监听器。

Javascript 中的事件监听器不附加到选择器，而是附加到实际元素本身。 document.querySelectorAll('.timeline-item') 选择当前具有 .timeline-item 选择器的所有 DOM 元素。 9 秒后(根据您的 setTimeout 函数)，您删除所有 .timeline-item 并获得最新的(load() deletes all inner HTML and replaces it with the new HTML)

如果您希望这些新添加的.timeline-item 具有事件监听器，那么您需要添加它们。像这样的东西可能对你有用:

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'
    })
  })
}