解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容

一、问题描述

在页面中使用laytpl.js模板引擎，在页面加载后无法使用jquery获取模板中的html元素，以下是图片和代码：

在添加或修改完毕后重新加载页面，不能使用jquery获取模板中的html元素，即点击table的tr不能改变该tr的颜色，不能使该tr的radio选中。

<div class="container"><div class="table-responsive"><table class="table table-bordered table-hover"><thead style="background-color: #f3f3f3"><tr><th><%--<input type="checkbox" name="chkall" value=" " id="chkall" />--%></th><th>周日期</th><th>项目</th><th>添加时间</th></tr></thead><tbody id="tbody"><script id="demo" type="text/html">{{# for(var i = 0,len = d.length; i < len;i++){ }}<tr><td><input type="radio" name="chkrow" value="{{ d[i].id }}" /></td><td>{{ d[i].zjhrq }}</td><td><a href="javascript:;" οnclick="article_edit('编辑周计划页面','planedit.aspx?id={{ d[i].id }}','2','800px','600px')">{{ d[i].title }}</a></td><td>{{ d[i].time }}</td></tr>{{# } }}</script></tbody></table></div></div>

<script>var tpl = document.getElementById("demo").innerHTML;
function pageFun(curr, num) {
if (!num) {
num = 4;//当前查询数据量
}
var kword = $("#txt_info").val();
$.ajax({
url: "getplanpagenum.ashx",
data: { page: curr || 1, num: num, keyword: kword },
async: false,//解决无法获取tbody的tr问题,在页面加载后先调用此方法再使用选择器
type: "post",
success: function (returnData) {
//var data = JSON.parse(returnData);
laytpl(tpl).render(returnData[0], function (html) {
document.getElementById("tbody").innerHTML = html;
});
laypage({
cont: $("#page"),
pages: returnData[1][0].Total / 10,
skip: true,
curr: curr || 1,
groups: 3,
jump: function (obj, first) {
if (!first) {
pageFun(obj.curr, num);
}
}
})
}
});
}function trSelect() {
$("tbody tr").click(function () {
$(this).prop("style", "background-color:#ececec").siblings().prop("style", "background-color:#ffffff");
$("tbody input:radio").removeAttr("checked");
$(this).find("input:radio").attr("checked", true);
});
}<script>

<script type="text/javascript">
$(document).ready(function () {
pageFun();
trSelect();
});
</script>

二、问题分析

经过多次测试，发现可能是js执行顺序和ajax同步/异步问题导致的。在添加和修改功能的回调函数里面，执行的window.parent.pageFun();方法后，添加window.parent.trSelect();方法，解决该问题。

$.ajax({url: "saveplaninfo.ashx",data: data,async: false,type: "post",success: function (returnData) {layer.msg(returnData.Info);if (returnData.State == "y") {clear();}window.parent.pageFun();//执行父页面的pageFun();方法window.parent.trSelect();}});

三、总结

使用模板引擎插件一定要注意ajax的同步/异步方式和js执行顺序，如果加载完毕后的模板使用js或jquery获取不到，先从这两个方面考虑。

我说的不一定是对的，在此我只是记录我遇到的问题，如果有问题还请各位道友多多指点。

解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容相关推荐

Js/Jquery获取iframe中的元素在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:win ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
js中用xpath获取iframe中的元素
最近遇到一个需求,写一个公共的js方法,用xpath获取页面中的元素的值,然后找了一下,发现可以这样获取: function _x(STR_XPATH) {var xresult = document ...
javascript模板库jsrender加载并缓存外部模板文件
前一篇说了jsrender嵌套循环的使用,在SPA的应用中,广泛使用的一个点就是view模板,使用了SPA之后,每个业务页面不再是独立的html,仅仅是一个segment,所以通常这些segment会 ...
js获取iframe中的元素_在 HTML 中包含资源的新思路
作者:scott jehl 翻译:疯狂的技术宅原文:https://www.filamentgroup.com/lab/html-includes/未经许可严禁转载注意:这篇文章描述了一种我们仍需 ...
计算机配置里无管理模板,组策略里打开后没有管理模板
组策略里打开后没有管理模板对于大部分计算机用户来说,管理计算机基本上是借助某些第三方工具,甚至是自己手工修改注册表来实现.其实Windows XP组策略已经把这些功能集于一体,通过组策略及相关工具完 ...
java 获取js html_JS获取网页中HTML元素的几种方法
编写js程序的时候最常使用的就是获取网页中的html元素,并进行处理,我在网上发现了一篇获取html对象的几种方法进行整理的帖子,发上来大家一块学习~ getElementById getElemen ...
Java 下载 Excel模板时，报修正 Excel在“xxx.xlsx”中发现不可读取的内容。是否恢复此工作薄的内容？如果信任此工作簿的来源，请点击是
代码如下: /*** 下载导入应用模板** @return*/@ResponseBody@RequestMapping(method = RequestMethod.GET)public Respon ...
python爬虫获取的网页数据为什么要加[0-[Python爬虫] 等待网页加载后再获取内容...
0x0 背景最近在学习Python爬虫的相关知识,主要是之前有一个小idea想要用Python实现,沉寂了一年,近期终于下定决心要利用假期时间首要解决此项任务,不然拖到最后都没完成,自己遗憾不说,还 ...

解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容

一、问题描述

二、问题分析

三、总结

解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容相关推荐

最新文章

热门文章