Используя jquery-mobile, я пытаюсь открыть второе всплывающее окно (для подтверждения) из первого всплывающего окна, когда пользователь нажимает кнопку удаления.

Я видел похожую ветку с рабочим кодом jsfiddlehttp://jsfiddle.net/EWQ6n/520/ Вот:Открытие диалога из диалога в JQuery Mobile

Однако даже копирование и вставка этого рабочего всплывающего кода в мой jsfiddle не работает. Я использую jQuery 1.10.1 с мобильным 1.4.2. Работающий jsfiddle в ветке выше использует 1.9. с мобильного 1.30b.1Когда я меняю JQuery на более старые версии, это работает. (Я знаю, это кажется простым ответом, но изменение сейчас испортит другие зависимости и стили кода. Я хочу понять эту проблему.)

    <!-- first popup -->
<div data-role="popup" id="popupInfo" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" class="ui-corner-top">
         <h1>Contact Info</h1>
    </div>
    <div data-role="content" data-theme="a">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" placeholder="Display name" data-theme="a">
        <label for="tel">Number:</label>
        <input type="tel" name="tel" id="tel" value="" placeholder="tel" data-theme="a">
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>
<a href="#popupDelete" data-role="button" data-rel="popup" data-transition="flow" data-icon="minus">Delete</a>
    </div>
</div>

<!-- second popup -->        
<div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
    <div data-role="header" data-theme="aa" class="ui-corner-top">
         <h1>Delete Contact?</h1>

    </div>
    <div data-role="content" data-theme="dd">
         <h3 class="ui-title">Are you sure you want to delete <span>#</span> from your contacts?</h3>

        <p>This action cannot be undone.</p>
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-inline">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>

    </div>
</div>

Я также заметил, что в jsfiddle последние 2 деления внутри моего первого всплывающего кода выделены красным. (Значит ли это, что они недействительны?) В моем редакторе они кажутся действительными HTML - по крайней мере, я не могу найти никаких проблем.

Это мой нерабочий jsfiddle:http://jsfiddle.net/gmdavis62/7AuNC/2/