JQuery Mobile面板 - 丢失内容调用.trigger（“创建”）

Posted 2021-04-05

打开jquery-mobile面板时遇到问题 - 当手指/鼠标滑动时它打开很好但是CSS似乎迷路了。我以前遇到过这个并使用了诸如...之类的功能。

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

但是，如果我这样做，面板中包含的列表视图完全消失了。

如果我在追加后使用这个电话我得到的图标但不是更多

$('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）

image2（一些css或至少图标）调用listview（）

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

答案

如果你将它附加到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面板中。

---

BTW, pay attention that in Your markup there is a typo: data- theme="b" (unwanted extra-space) and also here: <ul data-role="listview id="mylistview"> (missed closing quote).