ajax返回的html内容绑定不了js事件

bug描述
用ajax来动态改变网站的某一块内容，然后发现无法对其绑定js事件。用getElementsByClassName获取的数组长度也是为0。以下为Ajax返回的内容。

out.write("<div class=\"fansItem\" id=\"fansItem\">");
out.write("<img src=\"/user/portrait/pic_" + list.get(i).getOid() + ".jpg\" class=\"fansImg\"/>");
User user = new User();
user.setId(list.get(i).getOid());
out.write("<span class=\"fansNick\">" + user.getNick() + "</span>");
out.write("<span class=\"fansCheck\" id=\"fansCheck\">查看</span>");
out.write("</div>");

用来绑定js事件的代码如下

var fansItem = document.getElementsByClassName("fansItem");
var fansCheck = document.getElementsByClassName("fansCheck");
function getFans(){
    console.log(fansItem);
    for(var i = 0; i < fansItem.length; i++) {
        function fans(i) {
            fansItem[i].onmouseover = function () {
                fansCheck[i].style.display = "inline-block";
            }
            fansItem[i].onmouseout = function () {
                fansCheck[i].style.display = "none"
            }
        }
        fans(i)
    }
}
getFans();

解决方法
猜测是绑定js事件的那段代码的执行比ajax执行后返回内容要早，因此无法获取该元素。所以把调用getFans函数的调用放在回调函数里面就可以了，这样可以保证ajax每刷新一次后都会进行绑定事件，且会在返回内容之后执行js事件绑定，获取其DOM对象。

xmlhttp.onreadystatechange = function () {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200 && !isNaN(page) && parseInt(page)-1>0) {
            document.getElementById("fansAllItem").innerHTML = xmlhttp.responseText;
            document.getElementById("page").innerText = (parseInt(page) - 1) + "";
            getFans();
        }