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

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

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

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

elementui select组件选中后无法自动刷新更新值渲染到页面中
2019独角兽企业重金招聘Python工程师标准>>> elementui select更改选中值后,无法渲染到页面中? 在select组件中添加了@visible-change=& ...
Ajax获取数据渲染到页面的过程
Ajax 分四步骤: 创建一个Ajax对象: 打开一个链接: 监听请求的数据: 发送请求. 直接贴代码啦 <script>$(function () {$.ajax({url:'http: ...
Ajax获取数据渲染到页面
<script> $(function () {$.ajax({url:'http://www.hzy.cmdcw.com/index.php/message', type:'post', ...
根据数据和模板动态生成页面+列表的动态渲染
非原创本文转自https://github.com/a415432669/-front_end_notebook/tree/master/Node/day6/%E6%96%87%E6%A1%A3 根 ...
将数据渲染到页面的几种方式
将数据渲染到页面的几种方式: 1.字符串拼接: 2.dom回流 3.文档碎片(文档碎片节点:documentFragment) 4.模板 (下章会详细介绍模板) 转载于:https:/ ...
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
webview加载的页面和浏览器渲染的页面不一致_QQ音乐Android客户端Web页面通用性能优化实践...
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
如何使用prerender-spa-plugin插件对页面进行预渲染
本文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染. 预渲染(SSG)和服务端(SSR)渲染有一定的区别,大家想要了解的话可以看:https://segmentfa ...
城市列表页面的数据渲染
1. 创建新的分支city-ajax: 下载city.json文件,然后保存到mock下. 同理,Ajax请求我们一般会放在最外层的City组件上来做: 首先引入axios: 利用mounted函数, ...

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

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

最新文章

热门文章