jquery - JQuery Mobile面板-丢失了内容调用.trigger(“create”)

Question

我在打开jquery-mobile面板时遇到问题-滑动手指/鼠标时它可以很好地打开，但是CSS似乎丢失了。我之前遇到过这种情况，并使用过..等功能

$(#menu).trigger("create");

但是，如果我这样做，面板中包含的listview就会完全消失。

如果我在附加后使用此调用，则会得到图标，但不能再显示更多

$('ul').listview(); 

可能是什么原因？

js文件

var menu = {

menu_: null,
menuIsLoaded: false,
loadMenu: function(){

    var me = this;

    $.ajax({
        url: "html/menu.html",
        success: function(data){
            me.menu_ = $(data);
            me.menu_.appendTo("body");
            me.menuIsLoaded = true;

            console.log("menuloaded: " + me.menuIsLoaded);
            me.bindPanel();

        }
    }); 
},

bindPanel: function() {

    var me = this;
    var myMenu = me.menu_;

            $('body').on('swiperight', function () {

            console.log("open panel1");
            if(me.menuIsLoaded) {

                $(myMenu).panel().panel("open");
                //$('ul').listview();   
                //$(myMenu).trigger("create");                  
            }

        });

        $('body').on('swipeleft', function () {

            $(menu).panel().panel("close");
            console.log("close panel1");
        });
 }

}

html文件（面板）

   <div id="panelcontent">
<div data-role = "panel" id = "panel1" data-display="overlay" data- theme="b">
             This is Panel Header
    <div class="panel-content">

      <ul data-role="listview id="mylistview">
        <li data-icon="shop"><a href="page1.html">Page2</a></li>
        <li data-icon="tag"><a href="#campaign-list">Offers</a></li>
        <li data-icon="eye"><a href="#info-exhibition-map">area</a></li>
        <li data-role="list-divider"></li>
        <li data-icon="calendar"><a href="#info-program">Program</a></li>
        <li data-icon="calendar"><a href="#info-seminar">Seminars</a></li>
        <li data-icon="grid"><a href="#info-parking">Parking</a></li>

        <li data-icon="bars"><a href="#info-food">Beverage</a></li>
        <li data-icon="bars"><a href="#info-simulator">History</a></li>
        <li data-icon="user"><a href="#info-service">Callcenter</a></li>
        <li data-icon="location"><a href="#info-map">Vacation</a></li>
        <li data-role="list-divider"></li>
        <li data-icon="delete"><a href="javascript:;" data-rel="close">Hide menu</a></li>
      </ul>
    </div>

   

image1（无CSS）



调用listview（）的image2（某些CSS或至少一个图标）



image3（空白面板），调用$（＃menu）.trigger（“ create”）;

Answer 1

如果将其附加到body，则意味着您将以external panel结尾。

将其附加到主体之后，使用$(myMenu).panel().enhanceWithin();实例化面板，并告知JQM内部有新添加的内容，这些内容应加以增强（您的listview）。

此后，panel已被实例化，您可以使用$(myMenu).panel("open");打开它，并使用$(myMenu).panel("close");关闭它。无需再次实例化。

顺便说一句，对于外部内容，您需要在标记内提供data-theme或在创建时使用options，即对于您的面板，如下所示：

$(myMenu).panel({
  display: "overlay",
  theme: "b"
}).enhanceWithin();

而且，您甚至不需要swipeleft处理程序，因为它已经内置在JQM面板中。

顺便说一句，请注意，您的标记中有一个错字：data- theme="b"（不需要的多余空格），在这里也有：<ul data-role="listview id="mylistview">（缺少结束语）。