Problem z ginącymi danymi po zmianie zawartości diva

Question

Witam wszystkich :)

Może ktoś wie co jest nie tak z tym kodem?

function getUsers()
{
	$.ajax({
		type:"GET",
		url:"pobierz.php",
		contentType:"application/json; charset=utf-8",
		dataType:'json',
		             
		success: function(json) { 
		                    
		document.getElementById("lista").innerHTML = '<strong>Osoby online:</strong>
			 <span class="actions" id="RefreshUsers">Odśwież</span><br/>';
		for (var klucz in json)
		{
			var wiersz = json[klucz];     
			var login = wiersz[1];
		                             
			$("<span class=user>"+login+"</span>")
			.appendTo('#lista')
			.append("<br/>")
			} 
		},
		                 		                 
		error: function(blad) {
		alert( "Wystąpił błąd");
		console.log(blad);
		}
	});
}

$(document).ready(
function()
{
	$("#RefreshUsers").click(
	function()
	{
		getUsers();
	});

	getUsers();
});

Niby wszystko działa, ale jak zmienię zawartość diva za pomocą innerHTML to potem funkcja nie dołącza do niego danych z bazy. Zanim to dodałem wszystko było w porządku, a teraz w divie pojawia się tylko i wyłącznie to co podam jako innerHTML a wszystkie dane, które miały być dołączone gdzieś giną.

Pozdrawiam

Answer 1

Bo usuwasz przycisk (no właśnie, to powinien być button a nie span) i zastępujesz identycznym, ale nowym! Stąd musiałbyś albo na nowo przypiąć event, albo zastosować event delegation.

Answer 2

Dziękuję za szybką odpowiedź

Skrypt po drobnych modyfikacjach działa bez zarzutu. To co wcześniej wstawiałem wcześniej jako innerHTML wpisałem na sztywno do diva i stworzyłem wewnątrz niego kolejnego diva, który zawiera tylko i wyłącznie dane z bazy. Za każdym wywołaniem funkcji jest czyszczony żeby było miejsce dla odświeżonych danych.