Estou criando uma aplicação web onde a página principal é uma timeline, e esta timeline deve atualizar seu conteúdo automaticamente. Estou utilizando a função setTimeOut do JQuery para atualizar a timeline a cada x segundos.
Mas também possuo um outro código JavaScript que serve para mostrar elementos escondidos de tal item ao clicar na div.
Os dois código funcionam perfeitamente quando sozinhos, exceto quando tento utilizar os dois na página. O erro é o seguinte Após a timeline ser atualizada pelo setTimeOut, o segundo código (de clicar na div para mostrar/esconder elementos) não funciona mais. Tentei resolver de várias maneiras e não consegui e também não encontrei por soluções. Alguém sabe o que pode ser? Também aceito dicas de como melhorar a atualização da minha timeline, como por exemplo atualizar somente quando houver novos cadastros de itens, em vez de a cada x segundos.
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>
OBS: Possuo uma página exclusiva para o cadastro de novos itens ao banco de dados, a timeline retorna os itens existentes no BD.
$('#timeline').load(location.href + ' #timeline')
$('body').on('.elemento', 'click', function(){})
$('.elemento').live('click', function(){})
tbm funciona, em versões de jQuery mais novas