Почему не получается получить результат внутри addEventListener?

Question

[DiaTMss]

Доброго времени суток уважаемые программисты.

У меня есть 2 ссылки в меню

/albums
/bits

По нажатию /bits срабатывает обработчик addEventListener и формирует кусок html в DOM. В нем есть id list_item, но получить доступ к list_item я не могу вне этого обработчика он равен null. Я получаю list_item добираюсь до button хочу поставить ещё один обработчик по клику и получить button.value в результате нечего( Почему так?

Получаю только по 2 клику

null
<div id=​"list_item">​…​</div>​

tabMenu.children[0].children[1].children[0].addEventListener('click', function(event)
{
		history.pushState(null, null, this.href);

		document.title = 'Bits';

		getAjax('GET', location.pathname, null, getContent);

		var list_item = document.getElementById('list_item');

		console.log(list_item);

		//var list_item = document.getElementById('list_item');

		//console.log(list_item);

		/*list_item.addEventListener('click', function(event)
		{
				console.log(list_item);
		}, true);*/

		event.preventDefault();
}, true);

Answer 1

[Антон]

Вангую, что к моменту вызова

var list_item = document.getElementById('list_item');

у вас ajax-запрос ещё не выполнился, поэтому искомого элемента в DOM ещё нет.
Судя по всему, у вас контент с нужным элементом вставляется в функции getContent - вот после её выполнения (или в ней) и добавляйте обработчик.

Comments

[DiaTMss]

Спасибо огромное

[DiaTMss]

Не подскажите почему если быстро обновлять страницу вместо json получаю null?

вроде проверяю

if (xhr.readyState === 4)
{
if (xhr.status === 200)
{
playlist = JSON.parse(xhr.responseText);
}

else console.log(xhr.status + ' (' + xhr.statusText + ')');
}

Answer 2

[Александр]

потому что ajax асинхронен