js獲取不到模板DOM元素

在開發中遇到了一個問題,使用js一直獲取不到dom元素..找了好久終於找到一個可行的方案:

代碼以下:

<script id='tpl_order_index_list' type='text/html'>
        <%each list as order%>
        <div class='fui-list-group order-item' data-orderid="<%order.id%>" data-verifycode="<%order.verifycode%>">
            <div class='fui-list-group-title lineblock2 '>
                訂單號: <%order.ordersn%>
                <span class='status <%order.statuscss%>'><%order.statusstr%></span>
            </div>
            <%each order.goods[0].goods as g%>
            <div class="fui-list goods-list">
                <a class="good-box" href="{php echo mobileUrl('order/detail')}&id=<%order.id%>" data-nocache='true'>
                    <div class="fui-list-media" style="<%if g.status==2%><%/if%>">
                        <img data-lazy="<%g.thumb%>" class="">
                    </div>
                    <div class="fui-list-inner">
                        <div class="text goodstitle towline"><%if g.seckill_task%><span class="fui-label fui-label-danger"><%g.seckill_task.tag%></span><%/if%><%g.title%></div>
                        <%if g.status==2%><span class="fui-label fui-label-danger">贈品</span><%/if%>
                        <%if g.optionid!='0'%><div class='subtitle'  style="color:#999;"><%g.optiontitle%></div><%/if%>
                        <%if order.status==1%>
                            <%if !g.shidai_workid%>
                                <span class="text goodstitle towline design-status">無設計</span>
                            <%else%>
                                <span class="text goodstitle towline design-status"><%if g.shidai_status==0%>設計中<%else%>已設計<%/if%></span>
                            <%/if%>
                        <%/if%>
                        <!-- 訂單列表添加顯示做品名稱 -->
                        <%if g.shidai_workname!=''%><div class='subtitle'  style="color:#999;">在線設計做品：<%g.shidai_workname%></div><%/if%>

                    </div>
                </a>
                
                <div class="fui-list-angle">
                    &yen; <span class="marketprice"><%g.price/g.total%><br/>    <span style="color: #999">x<%g.total%></span><br/>
                    <%if order.status==1%>
                        <%if g.option_muban_lianjie%>
                            <span class="designBtn btn btn-sm btn-default-o" data-goodId="<%g.id%>" data-diyType="<%g.designtype%>" data-Url="<%g.option_muban_lianjie%>" onclick="design(this)">在線設計</span>
                        <%else%>
                            <span class="designBtn btn btn-sm btn-default-o" data-goodId="<%g.id%>" data-diyType="<%g.designtype%>" data-Url="<%g.muban_lianjie%>"" onclick="design(this)">在線設計</span> <%/if%> <%/if%> </div> </div> <%/each%> <div class="fui-list-group-title lineblock"> <span class="status noremark">共 <span><%order.goods.length%></span> 個商品 實付: <span class='text-danger'>&yen; <span class="bigprice"><%order.price%></span></span></span> </div> <div class="fui-list-group-title lineblock   opblock" > <span class="status noremark"> <%if order.userdeleted==1%> <%if order.status==3 || order.status==-1%> <div class="btn btn-default btn-default-o order-deleted" data-orderid="<%order.id%>">完全刪除訂單</div> <%/if%> <%if order.status==3%> <div class="btn btn-default btn-default-o order-recover" data-orderid="<%order.id%>">恢復訂單</div> <%/if%> <%/if%> <%if order.userdeleted==0%> <%if order.status==0%> <div class="btn btn-default btn-default-o order-cancel">取消訂單 <select data-orderid="<%order.id%>"class="btn btn-sm btn-default-o"> <option value="">不取消了</option> <option value="我不想買了">我不想買了</option> <option value="信息填寫錯誤，從新拍">信息填寫錯誤，從新拍</option> <option value="同城見面交易">同城見面交易</option> <option value="其餘緣由">其餘緣由</option> </select> </div> <%if order.paytype!=3%> <a class="btn btn-sm btn-danger-o external" href="{php echo mobileUrl('order/pay')}&id=<%order.id%>" data-nocache="true" >支付訂單</a> <%/if%> <%/if%> <%if order.canverify&&order.status!=-1&&order.status!=0%> <div class="btn btn-sm btn-danger-o order-verify" data-nocache="true" data-orderid="<%order.id%>" data-verifytype="<%order.verifytype%>" style="margin-left:.5rem;" > <i class="icon icon-erweimazhuanhuan"></i> <span><%if order.dispatchtype==1%>我要取貨<%else%>我要使用<%/if%></span> </div> <%/if%> <%if order.status==3 || order.status==-1%> <div class="btn btn-default btn-default-o order-delete" data-orderid="<%order.id%>">刪除訂單</div> <%/if%> {if empty($trade['closecomment'])} <%if order.status==3 && order.iscomment==1%> <a class="btn btn-default btn-default-o" data-nocache="true" href="{php echo mobileUrl('order/comment')}&id=<%order.id%>">追加評價</a> <%/if%> <%if order.status==3 && order.iscomment==0%> <a class="btn btn-sm btn-danger-o" data-nocache="true" href="{php echo mobileUrl('order/comment')}&id=<%order.id%>">評價</a> <%/if%> {/if} <%if order.status>1 && order.addressid>0%> <a class="btn btn-default btn-default-o" href="{php echo mobileUrl('order/express')}&id=<%order.id%>" data-nocache="true">查看物流</a> <%/if%> <%if order.status==2%> <div class="btn btn-sm btn-danger-o order-finish" data-orderid="<%order.id%>">確認收貨</div> <%/if%> <%if order.canrefund%> <a class="btn btn-default btn-default-o" data-nocache="true" href="{php echo mobileUrl('order/refund')}&id=<%order.id%>"><%if order.status==1%>申請退款<%else%>申請售後<%/if%><%if order.refundstate>0%>中<%/if%></a> <%/if%> <%/if%> </span> </div> </div> <%/each%> </script> <script type='text/javascript'> function design(current) { var diyUrl = $(current).data('url'), diyType = $(current).data('diytype'), goodId = $(current).data('goodid'), otherParam = diyType > 0 ? ('-ver='+ (diyType*1 + 1)): '', single = diyUrl.search(/(\/mobile\/design\/)|(\/design\/designwork\.aspx)/gi) != -1, oparmCut = single ? '$oparm=' : '#', jumpUrl = diyUrl + oparmCut + goodId + otherParam; location.href = jumpUrl; } </script> {if com('verify')} {template 'order/verify'} {/if} 複製代碼

緣由:

<script type="text/html" id="javascript_template">
複製代碼

在模板渲染時js已經所有執行完了,致使js獲取不到dom元素...

這種寫法，在頁面渲染的時候，瀏覽器不會讀取script標籤中的html代碼, 外面不能獲取到裏面的div節點

因此： 在使用時，要在script標籤上加個ID能夠供咱們找到它， 即然作模版用，且裏面的html代碼不會被渲染讀取，則需在外面再新建一個div來當容器，裝下這些html代碼， 即咱們能夠經過

var _html=document.getElementById('javascript_template').innerHTML;
document.getElementsByTagName('div')[0].innerHTML=_html;
複製代碼

而後咱們模版裏的htmll代碼就能夠運行在頁面中了;

解決:

若是遇到html代碼加入外部div後，獲取不到節點的狀況，能夠在外部寫個函數，而後在html內部用行內調用 onclick="_dom()"

function _dom() {
    document.getElementById('wrap')
}
複製代碼