从JQM对话框中修改页面

Question

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

我试过的是以下内容，在一个JQM页面中，我有一个叫做包含按钮的按钮（逻辑上）的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 
} 

Answer 1

的onclick是你的问题（平变化也），不使用jQuery使用移动。在触发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'}); 
}