js模板獲取不到DOM元素
阿新 • • 發佈:2020-12-23
在開發中遇到了一個問題,使用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"> ¥ <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'>¥ <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')
}