ajax请求后的数据渲染到页面中，a链接失效

Question

<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>&yen;<%= data[i].price%></span>
                <span>&yen;<%= 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>
    
    
    
  
  
  

Answer 1

mui点击事件需要用tap委托生效