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

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