6

请找到下面的小提琴http://jsfiddle.net/yesvin/Xj8p8/

<ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="pageselect">page select</label>
            <select name="pageselect" id="pageselect" data-native-menu="false">                
                <option value="">Choose One</option>
                <option value="">pageselect opt 1</option>
                <option value="">pageselect opt 2</option>
                <option value="">pageselect opt 3</option>
            </select>
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
</ul>   

<a href="#pop" data-rel="popup" data-position-to="window" data-role="button" id="farmer_family_member">Add Popup</a>


<div data-role="popup" id="pop">
    <ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="popupselect">popup select</label>
            <select name="popupselect" id="popupselect" data-native-menu="false">                
                <option value="">popup select opt 1</option>
                <option value="">popup select opt 2</option>
                <option value="">popup select opt 3</option>
            </select>
        </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>        
    </ul> 
</div>

和我的页面一样，当我在移动设备上查看该页面时，它有一些问题，

  1. 当我单击添加弹出按钮时，它会打开一个弹出窗口，在该弹出窗口中有选择菜单，并且该选择菜单的 data-native-menu=false 不起作用。我该如何启用它？

  2. 如果我更改弹出窗口内的“popupselect”菜单，则“pageselect”菜单正在打开。我该如何防止呢？

请指教...

提前致谢。

4

1 回答 1

11

第一个答案

简短的回答是你不能那样做。我知道，这听起来很傻，但是 jQuery Mobile 对弹出窗口有一些限制，主要限制是您不能链接弹出窗口。因为自定义选择菜单只是另一个弹出窗口，所以无法从弹出窗口中显示。

注意：不允许链接弹出窗口

该框架目前不支持弹出窗口的链接，因此无法嵌入从一个弹出窗口到另一个弹出窗口的链接。弹出窗口中所有带有 data-rel="popup" 的链接根本不会做任何事情。

这也意味着自定义选择菜单在弹出窗口中不起作用，因为它们本身是使用弹出窗口实现的。如果您在弹出窗口中放置一个选择菜单，即使您指定 data-native-menu="false"，它也会呈现为原生选择菜单。

官方文档：http ://api.jquerymobile.com/popup/

这个问题有一个可用的解决方法，但在这种情况下不能使用。要使解决方法起作用，需要先关闭一个弹出窗口，然后才能打开第二个弹出窗口。不幸的是，这在这里不可行。

第二个答案

这也被称为跌倒事件。这是一个冷的 javascript 错误，好吧不是错误本身，因为 javascript 从来没有打算像这样工作。

基本上当你点击一个元素时，点击事件会落到下面的元素上。

可以使用以下功能来防止这种情况：

这是一个 jsFiddle 示例，因此您可以理解这个问题：http: //jsfiddle.net/Gajotres/Xz2np/

$('#page1').live('pagebeforeshow',function(e,data){
    $('.someDiv').live('click', function (e) {   
        alert('Event is not going to propagate to content div, thus not hiding a header');             
        event.stopPropagation();   
        event.stopImmediatePropagation();
    });
});

要理解这个问题，只需单击一个 DIV 示例然后注释这 2 行，再次运行一个示例并再次单击一个 DIV。

最后一件事

这听起来很粗糙，但需要说一下。不要忘记不时接受答案。我可以看到我对你之前的问题给出了几个答案。我通常不介意这一点，但其他人会这样做，他们不会帮助你。

于 2013-04-17T14:52:19.723 回答