Jquery mobile jQuery Mobile listview SwiperRight事件

Jquery mobile jQuery Mobile listview SwiperRight事件,jquery-mobile,webmatrix,Jquery Mobile,Webmatrix,我试图在jQuery移动网页vegPizzas.html中实现swiperight事件,该网页在可折叠的列表视图中显示一个素食比萨饼类别。列表项正确显示了该类别比萨饼的图像、名称和价格。当我向右滑动时,它会正确处理swiperight事件以显示配料。当直接在WebMatrix中启动时,页面工作正常。但是,当我启动主页并导航到vegPizzas.html页面时,swiperight事件停止工作,并且不显示成分 vegPizzas.html的部分脚本和代码为: <script>

我试图在jQuery移动网页vegPizzas.html中实现swiperight事件,该网页在可折叠的列表视图中显示一个素食比萨饼类别。列表项正确显示了该类别比萨饼的图像、名称和价格。当我向右滑动时,它会正确处理swiperight事件以显示配料。当直接在WebMatrix中启动时,页面工作正常。但是,当我启动主页并导航到vegPizzas.html页面时,swiperight事件停止工作,并且不显示成分

vegPizzas.html的部分脚本和代码为:

     <script>
        $("nonvegpizzas.html").live("pageinit", function(event) {

        $("#listitem1").on("swiperight",function(){
          $("#listitem1").html("Chicken, Cheese, Onion.")  
        });   
            . . . .
      <body>
          . . . 
        <ul data-role="listview" data-inset="true" data-autodividers="true" >
          <li id=listitem1> 
            <img src="Images/vegpizza1.jpg" alt="Cheesy Delight"/>
             <h3 style='margin-left: 15px'>Cheesy Delight</h3>
           </li>
      . . .
       </ul>
     </body>
此页面从main index.html文件中引用为:

<ul data-role="listview" data-inset="true">
   <li><a href="vegpizzas.html">Veg Pizzas</a></li>         

我做错了什么?

因为您使用的是单独的html页面,所以需要将vegPizzas.html中的脚本移动到div data role=页面中,以便默认的ajax导航将拾取脚本和html。默认情况下,当您导航到新的html页面时,jQM仅加载第一个data role=page div,页面之外的所有内容都不会加载到您的主页中。