jquery-mobile 1.4.5 弹出列表视图点击不适用于大内容

Question

我有一个 jquery-mobile 页面，其中包含一个弹出窗口。弹出窗口充满动态内容，显示为列表视图。每个 li 元素都附加了一个单击侦听器。工作很远，但对于长列表视图，弹出窗口打开时不可见的所有 li 项目似乎都失去了点击监听器。这发生在移动浏览器上：IOS Safari、Android 股票浏览器、Android 上的 Chrome。新的 Firefox 可以工作，桌面浏览器也可以（编辑：不是 OSX 上的 Chrome）。没有要测试的平板电脑。有任何想法吗？ Test page here

Answer 1

有一个简单的解决方案可以解决您的问题。

只需在弹出窗口中使用 iScrollView 插件即可。通过这种方式，您可以限制弹出窗口的尺寸，并且仍然在弹出窗口中保留长列表视图。

教程和工作示例：http://www.gajotres.net/using-iscroll-with-jquery-mobile/2/

HTML

<div data-role="page" id="index">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div data-role="popup" id="popupBasic">
            <div class="header" data-role="header">
                <h1>Products</h1>
            </div>
            <div class="content" data-role="content" data-iscroll>
                <ul data-role="listview">
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>                
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>                
                </ul>                
            </div>
            <div class="footer" data-role="footer">
                <a class="close" href="#" data-rel="back" data-role="button">Close</a>
            </div>
        </div>                
    </div>

    <div data-theme="b" data-role="footer" data-position="fixed">
        <h1>Footer</h1>
    </div>    
</div>      

CSS

.ui-content {
    padding: 0 !important;
}

.ui-listview {
    margin: 0 !important;
}

div.iscroll-scroller {
    width: 100% !important;
}

.ui-popup .ui-content {
    height: 150px !important;
}

如果您有评论，请在下方留言，如果您喜欢这个示例，请不要忘记接受它。