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();
        }