解决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:;" onclick="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获取不到，先从这两个方面考虑。

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