为什么li标签必须点击两次才能打开子页面

Question

查询 数据时把每条数据用 li标签展示，并且在生成数据时，给每个li标签都添加对应的id，目的是根据这个 id 打开不同的页面：

以第一个 li 为例，它的页面的结构为：

<li class="mui-table-view-cell mui-media js-media" id="Biometric">
    <div class="pro-pannel">
        <img class="mui-media-object mui-pull-left js-img js-pro-img" src="http://www.beta.anviz.com/Style/crmtmp/storage/2016/October/week2/537549_S-L100K_LowVoltage03.png">
        <div class="mui-media-body js-media-body">Biometric<p class="anviz-ellipsis js-des js-pro-des">We know biometric, and we know you.</p></div>
    </div>
</li>

因为是多个li标签，因此我使用js写时，就写成如下：

    jQuery('#productList').on('tap', 'li', function(e) {
        e.stopPropagation();
        var id = jQuery(this).attr('id');//这个id就是每个li标签对应的id
        
        switch(id) {
            case 'Biometric':
                jQuery('#Biometric').on('tap', function() {
                    var biometricVal = jQuery(this).find('.js-media-body')[0].firstChild.data;
                    console.log("当前的li标签的内容为：" + biometricVal);

                    mui.openWindow({
                        url: "page/productor/biometric.html?title=" + biometricVal,
                        id: "#biometricPage"
                    });
                });
                break;
        }
    })

我这样写，在手机上测试时是可以打开的，不过要连续点击 2 次才可以打开id对应的子页面，我找不到原因，请大家帮我看看是哪里出问题了，为什么不是点击 1 次就可以打开子页面？ 谢谢！

Answer 1

你的事件绑定了两次；肯定要触发两个；你可以在swicth判断id触发对应的事件就可以；不用on.

Answer 2

因为你第一次点击了之后，才赋予了另外一个点击事件，所以要点击两次。这里应该用事件委托。

// 比如有个ul是li的父级，使用事件委托
$('ul').on('click', function(e){
  // 判断点击目标是否你要的那个
  if(e.target.id === 'xxxx'){
    // 执行你要做的事情
  }
})

Answer 3

根据楼上大师的解答：当id为true时，不需要再次点击，直接做需要做的事就OK：

productList 是 li 的父级

   jQuery('#productList').on('tap', 'li', function(e) {
        e.stopPropagation();
        var id = jQuery(this).attr('id');

        switch(id) {
            case 'Biometric':
                var biometricVal = jQuery(this).find('.js-media-body')[0].firstChild.data;
                console.log("当前的li标签的内容为：" + biometricVal);

                mui.openWindow({
                    url: "page/productor/biometric.html?title=" + biometricVal,
                    id: "#biometricPage"
                });
                break;
        }
    })