Почему не делегируется функция?

Question

[Владимир Шикльгрубер]

зарание спасибо всем за помощь

window.onload = function () {
    var link = document.getElementById('historyAPI');
    link.addEventListener("click",
            function (e) {
                e.preventDefault();
                getContent(link, true);
            }, true
            );
};

Опишу задачу.
Есть код на jquery (он работает на ура)
pastebin.com/4bekrGeb
Вот этот же код пытаюсь переписать на "чистый" js
pastebin.com/BpRXBs14

Проблема в том что после первой подгрузки контенета (в нём есть тоже ссылки которые надо обработать)
пр нажатии на ссылку не вызывается обработчик, а тупо переходид дальше как по обычной ссылке.

Answer 1

[Сергей Мельников]

самая главная ошибка в том, что historyAPI это класс элемента, а вы ищете элемент с таким id (getElementById)

window.addEventListener("DOMContentLoaded", function() {
	document.addEventListener("click", function(event) {
		var link = document.querySelector(".historyAPI");
		if (event.target !== link) return;
		event.preventDefault();
    getContent(link, true);		
	})
})

Comments

[Алексей Зуев]

Не очень хороший пример делегирования события, у вас link всегда только первый элемент с классом historyApi, на следующих элементах переход по ссылке сработает

[Владимир Шикльгрубер]

Алексей Зуев: я сделал по другому

Answer 2

[Дима Паутов]

https://learn.javascript.ru/event-delegation
habrahabr.ru/post/70760

Comments

[Владимир Шикльгрубер]

не фига не выходит чего то

[Дима Паутов]

Владимир Шикльгрубер: Хорошо, может ошибки есть? А что делает getContent(link, true); ???

[Владимир Шикльгрубер]

Дима Турков: весь код

var XMLHttpRequest = XMLHttpRequest || window.ActiveXObject && function () {
    return new ActiveXObject('Msxml2.XMLHTTP');
};

function get_s(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, false);
    xhr.send(null);
    return xhr.responseText;
}


window.onload = function () {
    var link = document.getElementById('historyAPI');
    link.addEventListener("click",
            function (e) {
                e.preventDefault();
                getContent(link, true);
            }, true
            );
};

window.addEventListener("popstate", function (e) {
    getContent(location.pathname, false);
});



function getContent(link, addEntry)
{
    var url = link.href.replace(/^.*?:\/\/.*?(?=\/|$)/, '');
    var result = get_s(url);
    contentHolder.innerHTML = result;
    if (addEntry === true) {
        history.pushState(null, null, link.href);
    }
}