addEventListener无法正常工作

Question

首先让我简要地向您解释一下我尝试做什么，当页面首次加载时，我有一个包含10个元素的无序列表，然后每当用户滚动列表并到达底部时，它会再加载10个元素。我用ajax完成了这个并且它工作正常，问题是我希望用户点击的元素必须出现在输入字段中，我不知道为什么这不起作用：

function loadCod(){
$.ajax({
    url: '<%= request.getContextPath() %>/GetMoreCod',
    error: function(){
        var s = "CONNECTION'S ERROR";
        alert(s);
    },
    success: function(data){
        if(data == null) return null;
        if(data.indexOf('|') == -1) return new Array(buffer);
        var arrayCod = data.split('|');

        for(var i = 0; i< arrayCod.length; i++)
        {
            var ul = document.getElementById("menu");
            var li = document.createElement("li");
            $("li").each(function()
                {
                var $li = $(this);
                $li.css("cursor","pointer");       
            });
            var a = document.createElement("a");
            a.textContent = arrayCod[i];
            a.addEventListener("click",function(){  //HERE IS THE PROBLEM
            $("#codField").val(arrayCod[i]);},false); 
            li.appendChild(a);
            ul.appendChild(li);
        }

    },
    type: "GET"
});

}

对我来说很奇怪的是，如果$("#codField").val(arrayCod[i])而不是arrayCod[i]我放了像"Hello"这样的东西它确实有效并且它出现在输入中。

另一个例子是，如果我在alert(arrayCod[i])之前写addEventListener它会向我显示正确的值，但如果我在addEventListener内执行此操作，它就不会显示任何内容。

[编辑]我查了this但它仍然无法正常工作