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

最新推荐文章于 2026-03-31 15:21:41 发布

原创最新推荐文章于 2026-03-31 15:21:41 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #mustache

javaScript 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一种在JavaWeb开发中使用模板引擎渲染数据的方法，包括数据获取、模板定义及引用、页面渲染实现过程和事件绑定等内容。

我们在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, 0, 5);
	});

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