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

问题描述

问 题

查询 数据时把每条数据用 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 次就可以打开子页面？ 谢谢！

解决方案

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

这篇关于javascript - 为什么li标签必须点击两次才能打开子页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！