jquery-mobile 1.4.5 popup listview点击不能处理大内容

Question

我有一个包含弹出窗口的jquery-mobile页面。弹出窗口充满动态内容，显示为列表视图。每个li元素都附加一个单击侦听器。适用于远程，但对于长列表视图，弹出窗口打开时看不到的所有li项似乎都失去了它们的点击监听器。这种情况发生在移动浏览器上：IOS Safari，Android股票浏览器，Android上的Chrome。新的Firefox可以使用桌面浏览器（编辑：不是OSX上的Chrome）。没有药片要测试。有任何想法吗？ Test page here

Answer 1

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

只需在弹出窗口中使用iScrollView插件即可。这样，您可以限制弹出尺寸，并在弹出窗口中保留长列表视图。

教程＆amp;＆amp;工作示例：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;
}

如果您有评论，请将其留在下面，如果您喜欢此示​​例，请不要忘记接受它。