在javascript中打開彈出窗口/對話框的問題

Question

我的應用程序中有一個動態選擇框。 單擊任何列表項后，我需要在彈出窗口中顯示項目詳細信息。 但是我無法打開現在沒有發生的彈出/對話框，我的代碼是，

 $( "#locationList" ).on( "click", "li", function( event ) { 
   alert("click event");
   $.mobile.changePage('#myPopupDialog', 'pop', true, true);
}); 

我可以看到警報，但是對話框沒有打開。

<div data-role="dialog" id="dialog">
      <div data-role="header">
        <h1>List Item details</h1>
      </div>

      <div data-role="main" class="ui-content">
        <h2>Welcome to my Popup Dialog!</h2>
      </div>

      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div>

列表元素應動態來自Db，例如，

var optionheading = '<li value="Select Location">Select Location</li>';
for (var i = 0; i < res.rows.length; i++)
            {
               var opt  = '<li value="';
               opt += res.rows.item(i).Location;
               opt += '">';
               opt += res.rows.item(i).Location;
               opt += '</li>';
               $("#locationList").append(opt);
            }
          $("#locationList").listview('refresh');

HTML：

<ul data-role="listview" id="locationList" data-dismissible="false" style="height: 150px;border:1px solid #ccc;background:#f2f2f2;font:normal 11px/15px arial;padding:6px;color:#333; overflow: auto" name="locationList" data-inset="true">
                </ul>

有什么建議么！！

Answer 1

您的對話框有

id="dialog"

但是，您的JavaScript試圖彈出一個ID為myPopupDialog的對話框：

$.mobile.changePage('#myPopupDialog', 'pop', true, true);

這些ID必須匹配！

如果使用的是jQM 1.4.x，則對話框頁面應使用data-dialog =“ true”：

<div data-dialog="true" id="myPopupDialog">

這是一個有效的演示