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">
¥ <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')
}
