弹出窗口不想出现（jquery mobile、phone gap）答案

【问题标题】：popup does not want to appear (jquery mobile, phone gap)弹出窗口不想出现（jquery mobile、phone gap）
【发布时间】：2013-12-30 15:16:02
【问题描述】：

我使用 2.9 版的 cordova 和 1.3.2 版的 jquery.mobile。我使用 eclipse 在平板电脑上测试我的手机间隙应用程序。

我动态初始化要插入弹出内容的 div：

var panelDetailArticle = $(''
+'<div data-role="popup" id="popupBasic">'
+'<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" id="popupContenuBasic">'
+'</div></div>');

$(panelDetailArticle).appendTo("body").trigger('create');

然后我点击一个填充弹出窗口的按钮：

  $(".detail_article").click(function(){

            var familleIndex = $(this).parent().find('input[type=hidden]:eq(0)').val();
            var articleIndex = $(this).parent().find('input[type=hidden]:eq(1)').val();

            var article = ListFamille[familleIndex].ListArticles[articleIndex];
            $("#popupContenuBasic").html(''
                       +'<h4 style="margin-bottom: 16px;"> Détails article </h4>'
                       +'<ul  data-role="listview" data-inset="false">'
                       +'<li style="text-align:center;"><p class="parag">' 
                       +'<br/>Desingation : '+article.Designation
                       +'<br/>CAB : '+article.CAB
                       +'<br/>Prix Unitaire HT : '+article.PrixUnitaireHT
                       +'<br/>Prix Unitaire TTC : '+article.PrixUnitaireTTC
                       +'<br/>Quantité Disponible : '+article.QuantiteDisponible
                       +'<br/>Imange : '
                       +'<br/> <a href="#" id="Close-PopUp" data-role="button" data-theme="b" >Fermer</a>'
                       +'</li>'
                       +'</ul>');


;

               $("#popupBasic").popup();
                $("#popupBasic").popup("open"); 

            $('#popupBasic').trigger('create');


           });

我尝试打开这个弹出窗口；

我在 eclipse 的 logcat 中出现错误：

  E/Web Console(5572): Uncaught TypeError: Cannot read property 'jQuery19104939002424944192' of undefined at file:///android_asset/www/js/API/jquery.mobile-1.3.2.min.js:6473

请帮帮我。

【问题讨论】：

标签： javascript android eclipse jquery-mobile cordova

【解决方案1】：

应在 jQuery Mobile 1.3.2 中将弹出 div 添加/附加到页面 div，因此，您有两种选择：

$.mobile.activePage.append(panelDetailArticle);

或

$("#page_ID").append(panelDetailArticle);

然后，创建并打开它。

$("#popup_ID").popup().trigger("create").popup("open");

Demo

【讨论】：

【解决方案2】：

如果您尝试删除以下行会怎样：

$('#popupBasic').trigger('create');

当您调用以下行时，似乎触发了“创建”：

$("#popupBasic").popup();

见http://api.jquerymobile.com/popup/#event-create

是的，在 JSFiddle 中我看到了该错误，但如果我注释掉该行，它就会消失。这是小提琴：http://jsfiddle.net/cAtUE/

Omar 是对的：弹出窗口需要添加到页面 div。您甚至可以随意使用触发器创建。这是一个新的小提琴：http://jsfiddle.net/bUgDe/

或者，您可以单独“刷新”小部件，而不是使用触发器（'create'），如下所示：

$('#popupContenuBasic ul[data-role="listview"]').listview().listview('refresh');
$('#popupContenuBasic a[data-role="button"]').button().button("refresh");

这是一个新的小提琴：http://jsfiddle.net/bEkxj/ 我还将锚按钮更改为按钮。您实际上可能希望完全远离 create 方法。根据 jQuery Mobile 1.4.0 (http://jquerymobile.com/changelog/1.4.0/) 的更新日志：

不推荐调用 create 来增强容器或小部件 $.fn.enhanceWithin() 现在将成为增强容器的方法

【讨论】：