一、问题描述
在页面中使用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获取不到,先从这两个方面考虑。
我说的不一定是对的,在此我只是记录我遇到的问题,如果有问题还请各位道友多多指点。