jquery mobile - 弹出窗口中的自定义选择菜单

Question

请找到以下小提琴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. 如果我更改弹出窗口中的"弹出选择"菜单,则会打开"pageselect"菜单.我该如何防止这种情况？

请指教...

提前致谢.

Answer 1

第一个答案

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

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

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

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

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

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

第二个答案

这也被称为堕落事件.这是一个冷的javascript错误,好吧不是bug perse因为javascript从来没有打算像这样工作.

基本上,当您单击一个元素时,单击事件将落在下面的元素中.

这可以通过以下功能来防止:

• stopPropagation()
• stopImmediatePropagation()

这里有一个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示例然后注释这两行,再次运行一个示例并再次单击DIV.

最后一件事

这听起来很粗糙,但需要说明一点.不要忘记不时接受答案.我可以看到我在你之前的问题上给了你一些答案.我通常不介意这一点,但其他人这样做,他们不会帮助你.