<script type="text/html" id="productlist">
<ul class="mui-clearfix">
<% for(var i = 0; i < data.length; i++) { %>
<li>
<a href="toProductBuy.html?key=<%= data[i].id%>" class="mui-btn-link mui-btn">
<img src="<%= data[i].pic[0].picAddr %>" onerror="this.src='images/none.jpg'" alt="">
<p class="one mui-ellipsis-2"><%= data[i].proName%></p>
<p class="two">
<span>¥<%= data[i].price%></span>
<span>¥<%= data[i].oldPrice%></span>
</p>
</a>
<a href="./shop-car.html?id=<%= data[i].id%>" class="mui-btn mui-btn-link">点击购买</a>
</li>
<% } %>
</ul>
</script>
利用template 渲染后的数据 为什么a链接点击无法跳转
使用mui框架 在手机上测试
css样式 less写的
ul {
li {
float: left;
width: ~"calc(50% - 6px)";
text-align: center;
background-color: #fff;
margin: 3px 3px 5px 3px;
padding-bottom: 5px;
box-shadow: 4px 4px 4px #ccc;
a:first-of-type {
display: block;
text-align: center;
img {
width: 100%;
}
.one {
text-align: left;
font-size: 12px;
color: #333;
}
.two {
font-size: 12px;
span {
&:first-of-type {
color: #222;
font-weight:700;
}
&:last-of-type {
color: #555;
text-decoration: line-through;
}
}
}
}
a:last-of-type {
display: inline-block;
font-size: 12px;
width: 60%;
width: 80px;
border-radius: 4px;
}
}
}
html结构
<li>
<a href="toProductBuy.html?key=2" class="mui-btn-link mui-btn">
<img src="/mobile/images/detail.jpg" onerror="this.src='images/none.jpg'" alt="">
<p class="one mui-ellipsis-2"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">李宁闪击篮球鞋驭帅10镭射队尚4男韦德之道空袭中高帮队尚3.5球鞋</font></font></p>
<p class="two">
<span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">¥499.1 </font></font></span>
<span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">¥888.1</font></font></span>
</p>
</a>
<a href="./shop-car.html?id=2" class="mui-btn mui-btn-link"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">点击购买</font></font></a>
</li>
mui点击事件需要用tap委托生效