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

Answer 2

也许是因为：您的div事件附加在document.ready中，经过x秒钟后，将执行my_function，从页面中删除了原始项目div，而新的div尚未附加事件。 因此，将div事件绑定到$（'＃timeline'）。loaded事件中。

JavaScript代码之间的冲突

2 个答案: