从JQM对话框修改页面

Modifying a page from JQM dialog

本文关键字：修改 对话框 JQM      更新时间：2023-09-26

我想要实现的是一个在div中有几个按钮的页面。当用户按下其中一个按钮时，会打开一个对话框，询问后续问题。之后，用户返回到同一页面，但带有按钮的div被隐藏。

我尝试过的是以下内容，在JQM页面中，我有一个名为buttons的div，它包含按钮（逻辑上）。这将打开对话框，并调用一个函数，将按下的按钮保存到本地存储中。然后打开对话框，实际将数据发送到服务器。

出于某种原因，当我从对话框返回时，div从未被隐藏。我甚至试图将一个变量保存到sessionStorage中，并在页面加载时隐藏div，但从对话框返回时，页面加载事件似乎不会触发。有什么建议吗？还是我错过了一些基本的东西？

<div class="ui-grid-b" id="buttons">
    <div class="ui-block-a"><a  href="#Popup" data-rel="dialog" onclick="savePushedButton('green')"></a></div>
    <div class="ui-block-b"><a  href="#Popup" data-rel="dialog" onclick="savePushedButton('yellow')"></a></div>
    <div class="ui-block-c"><a  href="#Popup" data-rel="dialog" onclick="savePushedButton('red')"></a></div>
</div><!-- /grid-b -->
// the dialog: 
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
        <form>
            <div style="padding:10px 20px;">
              <h3>Heading</h3>
              <textarea name="comments" id="popuptextarea"></textarea>
              <button type="submit" data-theme="b" onClick="save()">Selv&auml;</button>
            </div>
        </form>
</div>

我有两个javascript函数，它们试图保存数据并隐藏div，

function savePushedButton(color) {
    //save which button was pressed to local storage
    $('#buttons').hide();
    console.log("asd");
}
function save() {
//send data to server
}

onclick是您的问题（onchange也是），请不要将其与jQuery Mobile一起使用。在触发onclick之前，jQuery Mobile已经开始转换到对话框。在转换到对话框之前，您需要手动将单击事件绑定到按钮并隐藏按钮。

下面是一个工作示例：http://jsfiddle.net/Gajotres/uhsfs/

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button', function(){     
        $('#buttons').hide();
        savePushedButton($(this).attr('data-color'));
    });
});
function savePushedButton(color) {
    console.log(color);
    $.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'}); 
}
相关文章：