无法使用不同的id'；s在jquery mobile中打开滑动面板

我正在开发jquery移动单页应用程序，所以我的所有页面都在index.php中，具有不同的id。现在我想在滑动时打开我的左面板。当我使用其中一个主页有id的页面时，它工作正常，但我不知道如何在我的所有页面上使用它，因为我的所有页面都有不同的id

以下是我的jquery代码，用于在刷卡时打开面板：

<script type="text/javascript">
$( document ).on( "pageinit", "#home", function() {
    $( document ).on( "swipeleft swiperight", "#home", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

</script>

$（document）.on（“pageinit”，“#home”，function（））{
$（文档）.on（“swipeleft swiperight”，“#home”，函数（e）{
//我们检查页面上是否没有打开的面板，否则
//滑动关闭左面板也会打开右面板（和v.v.）。
//我们通过检查框架存储在页面元素（panel:open）上的数据来实现这一点。
如果（$.mobile.activePage.jqmData（“面板”）！=“打开”）{
如果（e.type==“swipeleft”）{
$（“右面板”）。面板（“打开”）；
}否则如果（例如类型==“swiperight”）{
$（“左面板”）。面板（“打开”）；
}
}
});
});

以下是打开面板的代码：

<div data-role="header" data-theme="p" data-position="fixed">
        <h1></h1>
        <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-role="button">Menu</a>
    </div>

<a data-theme="d" data-corners="false" data-role="button" href="#"> <img src="images/pearl-logo.png" alt="rss" style="display: block; margin: 1.5em auto;"></a>

<div data-role="panel" id="left-panel"  data-position="left" data-display="overlay" data-dismissible="true" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="docs" class="jqm-list">
            <li data-role="list-divider">LINKS</li>
            <li><a href="#home">Home</a></li>
            <li><a href="#20years">20 Years</a></li>
            <li><a href="#courses">Courses</a></li>
            <li><a href="#events">Fun @ Pearl</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#noida">Noida</a></li>
            <li><a href="#jaipur">Jaipur</a></li>
            <li><a href="#delhi">Delhi</a></li>
            <li><img src="images/pearl-logo.png"></li>
</ul>       
</div>

链接

以下是我的几个不同id的页面：

<div data-role="page" id="home" data-url="home">
<div data-role="content">
</div>
</div>
<div data-role="page" id="20years" data-url="20years">
<div data-role="content">
</div>
</div>
<div data-role="page" id="gallery" data-url="gallery">
<div data-role="content">
</div>
</div>

面板在所有页面上

以下是我在页面中如何调用面板：

<div data-role="page" id="20years" data-title="20years" data-url="20years"> 
<div data-role="appheader"></div>
  <div data-role="content">
</div>
</div>

以下是jquery代码：

<script>
$(document).ready(function(e) {

        $('[data-role=page]').one('pagebeforeshow', function (event, ui) {
       $("#" + event.target.id).find("[data-role=appheader]").load("appheader.html", function(){
         //$("#" + event.target.id).find("[data-role=panel]").trigger("pagecreate");
         // refresh the page again
        //   alert('ok');
         $("#" + event.target.id).trigger("create"); 
           });
        }); 

});

</script>

$（文档）.ready（函数（e）{
$（“[data role=page]”）。一（'pagebeforeshow'，函数（事件，ui）{
$（“#”+event.target.id）.find（“[data role=appheader]”）。load（“appheader.html”，function（）{
//$（“#”+event.target.id）.find（“[data role=panel]”）.trigger（“pagecreate”）；
//再次刷新页面
//警报（“正常”）；
$（“#”+event.target.id）.trigger（“创建”）；
});
}); 
});

将

#home

替换为

[data role=page]

，用于

pageinit

和

swipe

事件。就这些。@Omar:那不行，兄弟…：（你在每个页面都有面板吗？如果没有，每个页面都应该有自己的面板。不，兄弟，我最初有一个单独的面板，我把它添加到每个页面中，但这让应用程序很重，所以我只需要创建一个单独的文件appheader.html，并将标题和面板代码放入其中，然后我就在我的每个页面中调用它。我只是编辑了我的问题来添加这些。）代码我不完全确定它是如何设置的，您是否使用Ajax加载页面？是否每个页面加载中都包含了面板，导致太多具有相同ID的选项卡？