Javascript 如何使用jquerymobile链接？_Javascript_Jquery Mobile

Javascript 如何使用jquerymobile链接？

javascript jquery-mobile

Javascript 如何使用jquerymobile链接？,javascript,jquery-mobile,Javascript,Jquery Mobile,我有以下代码，正在使用jquery mobile。当我点击一个元素时，它不会进入“page2”。有关于如何解决这个问题的建议吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first jQuery Mobile code</title> <link rel="stylesheet"

我有以下代码，正在使用jquery mobile。当我点击一个元素时，它不会进入“page2”。有关于如何解决这个问题的建议吗

<!DOCTYPE html> 
<html> 
  <head> 
       <meta charset="utf-8"> 
       <title>My first jQuery Mobile code</title> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
       <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
       <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
       <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            .custom_listview_img {
                margin:0px; 
                padding:0px;
                background-repeat:no-repeat;
                background-size:100%;
                height:150px;
            }
            ul {list-style : none; padding:0px;}
        </style>

        <script>
            $(function() {
                $(".changePageButton").click(function() {
                    $.mobile.changePage("#page2");
                });        
            });
        </script>

        <script type="text/javascript">

  $(document).ready(function(){
    var url='http://api.yipit.com/v1/deals/?key=mRSTBQsB49CdMXTW&division=san-francisco&tag=restaurants&lat=37.871087&lon=-122.270913&callback=?';

        $.getJSON(url,function(json){
          $.each(json.response.deals,function(i,item){

             $("#results").append('<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal"><a class = "changePageButton" data-transition="slide"><li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top">'+item.business.name+'</li><li class="custom_listview_img" style = "background-image:url('+item.images.image_smart+');"></li></a></ul>');

          });
        });   

  });

</script>

 </head> 
 <body> 

    <div data-role="page" data-theme="c"> 

         <div data-role="header" data-theme="b"> 
               <h1>Dealoka</h1> 
         </div> 

         <div data-role="content" id = "results">
            <!-- Display results of parsing json here -->
         </div>   

    </div> 



<div data-role="page" id="page2" data-add-back-btn="true">
   <div data-role="header">
      <h1>Page 2</h1>
   </div>
   <div data-role="content">
      <p>Welcome to Page 2</p>
   </div> 
</div>

    </body> 
    </html>

<!-- Sort with jquery: http://stackoverflow.com/questions/5560493/html5-data-attribute-sort -->


我的第一个jQuery移动代码
.custom\u listview\u img{
边际：0px；
填充：0px；
背景重复：无重复；
背景大小：100%；
高度：150像素；
}
ul{列表样式：无；填充：0px；}
$（函数（）{
$（“.changePageButton”）。单击（函数（）{
$.mobile.changePage（“第2页”）；
});        
});
$（文档）.ready（函数（）{
var url='1〕http://api.yipit.com/v1/deals/?key=mRSTBQsB49CdMXTW&division=san-francisco&tag=餐厅&lat=37.871087&lon=-122.270913&callback=？'；
$.getJSON（url，函数（json）{
$.each（json.response.deals，函数（i，项）{
$（“#结果”）.append（“+item.business.name+””）；
});
});   
});
德洛卡
第2页
欢迎来到第2页

使用事件委派，因为您正在动态创建事件

$(function() {
      $("body").on('click', '.changePage', function() {
          $.mobile.changePage("#page2");
          });        
      });

您的问题是，当您将事件绑定到

changePageButton

时，它还不是DOM的一部分，您需要使用事件委派，或者在事件附加到DOM后将其绑定

使用事件委派时，您要做的是将事件绑定到

DOM

中更高的现有元素（如有必要，绑定到

文档

），并在事件出现时检查选择器。请注意，最好将其绑定到最近的较高元素

例如，您可以使用jQuery方法使用事件委派绑定事件

$(document).on('click','.changePageButton', function() {
    $.mobile.changePage("#page2");
});

将事件绑定到早期，尝试使用事件委派，或在将其附加到DOM后将其绑定。顺便说一句：为了避免脚本中出现如此多的HTML，最好使用模板库，如或当我将其绑定到更高的现有元素时，如何根据用户在此页面上单击的项目将不同的参数传递到下一页？如果您询问如何获取单击的元素，则可以从event.currentTarget获取该参数（与直接绑定到元素的情况相同）。当我将其弯曲到更高的现有元素时，我如何根据用户在该页面上单击的项目将不同的参数传递到下一页？@sharataka这是一个完全不同的问题。发布一个新问题。我问这个问题是因为我很好奇这种绑定方法是否会影响链接的实现。