Javascript addEventListener не работает с петлей

Question

Редактировать: Тема помечена как повторяющаяся. Я просто хотел сказать, что я не доволен ответами другого поста. В принятом ответе используется не такой хороший способ решения этой проблемы. Кроме того, я дал понять, что я прочитал все эти сообщения раньше и испытываю трудности с пониманием этой конкретной проблемной области в javascript.

Я вообще не понимаю. Я действительно много читаю, особенно о закрытии, но я не получаю это ... им на это часами. Почему следующий код не работает? Im теперь абсолютно потерян, и мне нужен кто-то, кто мог бы действительно указать, как я могу преодолеть такие ситуации, когда мой индекс не может быть распознан в моей функции события.

Как это работает? Мой addEventListener просто не работает, поскольку индекс распознается только вне его.

var lastResponse; 
var alpha = document.getElementById('alpha'); 
var httpRequest; 

function initAjax(url) { 
    httpRequest = new XMLHttpRequest(); 
    httpRequest.open('POST', url, true); 
    httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    httpRequest.send(); 

    httpRequest.onreadystatechange = function() { 
    if (httpRequest.readyState === 4 && httpRequest.status === 200) { 
     var response = httpRequest.responseText; 
     document.getElementById("omega").innerHTML = response; 
     fn(); 
    } 
    } 
} 

alpha.addEventListener("click", function() { 
    initAjax("test.php"); 
}); 

var x = document.getElementById("omega").children; 

function fn() { 
    for(var i=0; i < x.length; i++){ 
     console.log(x.length); 
     document.getElementById("omega").addEventListener("click", function(event){ 
      hello(i, event); 
     }, false); 
    } 
} 

function hello(index, event){ 
    console.log(event.currentTarget.children[index]); 
} 

Обновленного код

• Ajax получает содержимое с соответствующей дивой
• Когда запрос завершен Javascript впрыскивает возвращаемые данные от сервера до омеги.
• Омега имеет детей.
• Теперь я хочу нажать на одного из этих детей и получить их индекс.

Answer 1

Поскольку этот вопрос отмечен как дубликат, прежде чем @blessenm добавит свой ответ, я просто переписываю свой ответ, чтобы его изящное решение было видно кому-то в этом вопросе. Я опубликовал другой ответ, прежде чем вопрос был закрыт, поэтому я все еще могу отредактировать свой ответ. Все кредиты @blessenm:

function start() { 
    omega.addEventListener("click", function(evt) { 
    alert([].indexOf.call(evt.currentTarget.children, evt.target)); 
    }, false); 
} 

[] .indexOf является ярлык функции Array.prototype.indexOf. Первым аргументом, который вы передаете, является контекст, второй аргумент - это элемент, который вы ищете в этом массиве. Элементы массива DOM, подобные массиву, но не являются реальными массивами, поэтому они не имеют методов массива в Array.prototype - поэтому вы не можете использовать alert (evt.currentTarget.children.indexOf (evt.target)). Для выполнения операций с массивами в DOM мы используем метод вызова прототипа Array.