jQuery mobile-пользовательское меню выбора во всплывающем окне

пожалуйста, найдите ниже скрипку 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. когда я нажимаю кнопку Add popup, он открывает всплывающее окно, внутри этого всплывающего окна есть меню select и data-native-menu=false для этого меню select не работает. Как это сделать?

  2. Если я изменю меню "popupselect" внутри всплывающего окна, меню pageselect-это открытие. Как мне это предотвратить?

пожалуйста, советом...

спасибо заранее.

6
event-propagation jquery jquery-mobile jquery-mobile-fieldset jquery-mobile-popup

1 ответов

первый ответ

короткий ответ: вы не можете сделать это. Я знаю, это звучит глупо, но у jQuery Mobile есть некоторые ограничения с всплывающими окнами, и главное ограничение - вы не можете цеплять всплывающие окна. Поскольку пользовательское меню выбора - это просто еще одно всплывающее окно, его нельзя показать из всплывающего окна.

Примечание: цепочка всплывающих окон не допускается

платформа в настоящее время не поддерживает цепочку всплывающих окон, поэтому невозможно вставить ссылку из одного всплывающего окна в другое всплывающий. Все ссылки с данными-rel= "popup" внутри всплывающего окна ничего не сделают все.

Это также означает, что пользовательские меню выбора не будут работать внутри всплывающих окон, потому что они сами реализованы с помощью всплывающих окон. Если вы делаете выберите меню внутри всплывающего окна, оно будет отображаться как родной select меню, даже если вы укажете data-native-menu= "false".

официальной документации : http://api.jquerymobile.com/popup/

есть доступное решение этой проблемы, но он не может быть использован в данном случае. Для обходного пути для работы одно всплывающее окно должно быть закрыто, прежде чем второе может быть открыто. К сожалению, здесь это невозможно.

второй ответ

Это также известно как падение через события. Это холодная ошибка javascript, хорошо, не ошибка perse, потому что javascript никогда не должен был работать так.

в основном когда вы нажмете на один элемент, событие click упадет на элемент ниже.

Это можно предотвратить с помощью следующих функций:

и вот пример 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.

одна последняя вещь

это будет звучать грубо, но это нужно сказать. Не забывайте время от времени принимать ответ. Я вижу, я дал вам несколько ответов на ваши предыдущие вопросы. Я обычно не возражаю против этого, но другие делают, и они не собираются вам помогать.

11