对于模板渲染的页面，如何针对渲染出来的对象添加事件

我们在javaweb编程中往往从数据库中将数据取出来，使用模板渲染到页面上，渲染的数据上我们又希望可以产生不同的响应对于这样的问题，我们应该怎样实现

场景的描述:

<ul class="ewb-choice-item clearfix" id="oulist">
						</ul>

使用模板:

<!--服务部门渲染的list页面 -->
	<script type="text/x-template" id="oulistTemp">
	     {{#serveTypeOuList}}
	           <li class="ewb-choice-list cur l"  ><a style="cursor:pointer" value="{{ouguid}}">{{ouname}}</a></li>
         {{/serveTypeOuList}}
    </script>

引用对应的js:

<!-- 模板渲染控件 -->
	<script src="js/pub_lyg/mustache.js"></script>

页面对应的js:

var M = Mustache;
	var oulistTemp = $('#oulistTemp').html();
	var $oulist = $("#oulist");

获取数据并且渲染:

// 主管部门的渲染
	$.ajax({
		url : 'ServeType/getservetypeoulist',success : function(data) {
			var rendered = M.render(oulistTemp,data);
			$oulist.html(rendered);
			$("#oulist").children("a:first-child").addClass('cur');
		}
	});

给每个渲染出来的数据添加事件:

$("#oulist").on("click","a",function() {
		var od = $(this).attr("value");
		ouguid = od;
		$('.ewb-choice-list a').removeClass('cur');
		$(this).addClass('cur');
		buildList(ouguid,servename,5);
	});

上面也就实现了我们使用模板渲染，并且根据渲染的模板,给每个数据都添加一条记录，实现相关的操作