使用mobile.changepage的Jquerymobile对话框不工作在第二页

我有一个对话框（不是外部html），当我点击页面上的按钮时显示，它工作正常，如果包含对话框的html是要访问的第一页，但如果通过点击另一个页面上的href打开该文件，则单击该按钮时不会显示该对话框。使用mobile.changepage的Jquerymobile对话框不工作在第二页

下面是包含对话框的页面的代码...即使这不是要访问的第一页，但该按钮的单击事件中的警报也会显示，但对话框不显示。

<!DOCTYPE html> 
<html> 
<head> 
<title>Create Team</title> 
<link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 

</head> 
<body> 

    <!-- Page starts here --> 
    <div data-role="page" data-theme="b" id="page1"> 
     <div data-role="header" id="hdrMain" name="hdrMain" 
      data-nobackbtn="true"> 
      <h1>Test screen</h1> 
     </div> 
     <div data-role="content" id="contentMain" name="contentMain"> 
      <div id="fullnamediv" data-role="fieldcontain"> 
       <label for="fullname" id="fullnameLabel" name="fullnameLabel">Team 
        Name*</label> <input id="fullname" name="fullname_r" type="text" /> 
      </div> 
      <div id="submitDiv" data-role="fieldcontain"> 
       <a id="buttonSave" name="buttonSave" href="#" data-role="button" 
        data-inline="true">Save</a> 
      </div> 
     </div> 
     <!-- contentMain --> 
     <div data-role="footer" id="ftrMain" name="ftrMain"></div> 
     <script> 
      $("#page1").bind("pagecreate", function() { 
       $('#buttonSave').click(function() { 
        alert("aaaa"); 
       $.mobile.changePage('#successdiv', { 
        transition: 'pop', 
        reverse: false, 
        changeHash: true 
       }); 
        alert("after change"); 
        return true; 
       }); 
      }); 
     </script> 

    </div> 
    <!-- page1 --> 

    <div data-role="dialog" data-theme="a" id="successdiv"> 
     <div data-role="header" data-theme="f"> 
      <h1>Error</h1> 
     </div> 
     <div data-role="content"> 
      <p>This is Page 2</p> 
      <button type="submit" data-theme="e" name="successok" 
       value="submit-value" id="successbutton">Close Dialog</button> 
     </div> 
    </div> 
    <!-- Page ends here --> 
</body> 

</html>

来源

2012-01-14 saj-and

只是为了澄清打开它，你有一个外部的页面，它有一个链接页面#successdiv ，它不作为对话框打开？ – JoshRoss 2012-01-14 14:47:08

不，让我们说上面的页面是secondpage.html，我有另一个页面是firstpage.html。我第一次访问浏览器中的firstpage.html，它有一个对secondpage.html（一个正常的href，而不是对话框或任何东西）的href。在secondpage.html（上面的代码）中，当我点击“buttonsave”按钮时，它应该打开对话框“successdiv”。这工作（对话框显示）罚款，如果我直接打开secondpage.html，然后点击按钮。但是，如果打开firstpage.html，然后点击secondpage.html的href，然后点击buttonsave（secondpage.html），那么对话框不会显示。 – 2012-01-14 20:43:02

所以很清楚。您可以在secondpage.html中定义对话框HTML代码。当您从第一个jQuery Mobile导航到secind页面时，会从secondpage.html加载第一个页面元素（包含data-role =“page”的div）。所以'＃successdiv'元素不会被加载，并且不会出现在页面中。 Hense什么都没有显示您作为对话。 – dfsq 2012-01-14 21:29:37

您使用jQuery Mobile的1.0，但在同一时间，你传递不正确的参数，以$.mobile.changePage一样，如果它是说1.0的alpha。不知道是否可以解决您的问题，但值得一试：

$.mobile.changePage('#successdiv', { 
    transition: 'pop', 
    reverse: false, 
    changeHash: true 
});

来源

2012-01-14 17:51:00 dfsq

感谢您指出这一点，试过这个，没有运气，相同的行为，对话框不会显示出来。在javascript控制台中没有错误，并且在chrome/firefox/android浏览器上的行为相同，如果我先访问此页面，然后单击该按钮，则工作得很好。 – 2012-01-14 20:44:25

您是否尝试传递一个对象而不是字符串作为第一个参数？像'$ .mobile.changePage（$（'＃successdiv'），{...}）;'。 – dfsq 2012-01-14 20:47:47

是的，仍然没有运气，我得到的错误“未捕获TypeError：不能调用方法'_trigger的未定义”在JavaScript控制台。 – 2012-01-14 20:51:25

当我通过一个HREF中从一个jQuery Mobile的页面跳转到另一个，我不得不rel属性设置为外部，像这样：

<a href="page2.html" rel="external">page2</a>

来源

2012-01-16 16:39:28 JoshRoss

dfsq是正确的，当您从另一个页面链接到此页面时，只加载div [data-role =“page”]。我建议对话框移动到它自己的HTML文件，或者通过

<a href="your_dialog.htm" data-role="dialog">open dialog</a>

或

$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});

来源

2012-01-31 19:35:41

使用mobile.changepage的Jquerymobile对话框不工作在第二页

回答

相关问题