老师帮我看看这段代码

(function(){

    var itemTmpl = '<div class="left_bar_inner_item">'+

                    '<div class="item_text">$food_spu_tags_name</div>'+

                    '</div>'

    function getList(){

        $.get("./menu/json/food.json",function(data){

            var List = data.data.food_spu_tags;

            initContentList(List)

        })

    }

    function initContentList(List){

        List.forEach(function(item){

            var str = itemTmpl.replace("$food_spu_tags_name",getfoodsputags(item))

            var $food_detail = $(str);

            $food_detail.data("itemData",item)

            $(".left_bar_inner").append($food_detail);

        });

    }

    function addClick(){

        $(".left_bar_inner").on("click",".left_bar_inner_item",function(e){

            var $target = $(e.currentTarget);

            console.log($(".left_bar_inner_item").eq(0).data("itemData"));

        })

    }

    function getfoodsputags(data){

        if(data.icon){

            return '<img src='+data.icon+'>'+data.name

        }else{

            return data.name

        }

    }

    function init(){

        getList();

        addClick();

        console.log($(".left_bar_inner_item").eq(0).data("itemData"));

    }

    init();

})()

这里不涉及别的部分，就是data的部分，这里我为了测试只读了第一个“.left_bar_inner_item”就用eq(0)赛选了，然后在点击中是可以正常实现的。那为什么放在冒泡点击事件当中我就可以读出data的数据，放在全局中就显示undefined呢？？既然是绑定在“.left_bar_inner_item”这个元素中，那应该随时都可以读出来才是啊？