访问不到dom元素

只有在渲染出左边的菜单项时才能访问到这个.category-item元素，但是就算是在dom加载完毕后，其他位置也依旧访问不到这个元素

相关代码：

(function(){
	var itemTmpl='<div class="category-item">$getCategoryContent</div>'




	function addEvent(){
		//添加点击事件
		$('.category').on('click','.category-item',function(){
			$(this).addClass('active').siblings().removeClass('active')
			choose($(this).data('itemData'))
		})

	}
	function getCategoryContent(list){
		// 渲染类目内容
		if(list.icon.length!=0){
			// 有icon
			return '<img src='+list.icon+' /><span>'+list.name+'</span>'
		}else{
			return '<span>'+list.name+'</span>'
		}
	}
	function initCategoryList(list){
		// 渲染数据
		list.forEach(function(item){
			var str=itemTmpl
			.replace('$getCategoryContent',getCategoryContent(item))//渲染类目内容

			var $str=$(str)//转为jq对象
			$str.data('itemData',item)//挂载数据
			$('.category').append($str)
		})
		$('.category-item').first().click() //在这里能访问到.category-item ,就是左边那个菜单项，但是在其他位置获取不到菜单项
	}
	function getList(){
		// 获取数据
		$.get('../json/food.json',function(data){
			var list=data.data.food_spu_tags//包含了每个类目以及类目下菜品
			initCategoryList(list)
		})
	}
	function init(){
		getList()
		addEvent()
	}
	init()
})()