如何使用 jquery mobile 进行链接？答案

【问题标题】：How to link using jquery mobile?如何使用 jquery mobile 进行链接？
【发布时间】：2013-07-29 14:11:01
【问题描述】：

我有以下代码并且正在使用 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 -->

【问题讨论】：

你将事件绑定到早期，尝试使用事件委托或将其附加到 DOM 后绑定。
顺便说一句：为了避免脚本中出现如此多的 HTML，您最好使用 mustache.js 或 handlebar.js 之类的模板库

标签： javascript jquery-mobile

【解决方案1】：

您的问题是，当您将事件绑定到 changePageButton 时，它还不是 DOM 的一部分，您需要使用事件委托或在它附加到 DOM 后绑定它。

当您使用事件委托时，您所做的是将事件绑定到DOM 中的一个更高现有元素（如果需要，可以到document），并在事件冒泡。请注意，最好将其绑定到最近的 higher 元素。

例如，您可以使用 jQuery .on 方法通过事件委托来绑定事件

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

【讨论】：

当我将它弯曲到更高的现有元素时，我将如何根据用户在此页面上单击的项目将不同的参数传递给下一页？
如果您询问如何获取单击了哪个元素，那么您可以从 event.currentTarget 中获取（与直接绑定到元素相同）。

【解决方案2】：

使用事件委托，因为您是动态创建事件；

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

【讨论】：

当我将它弯曲到更高的现有元素时，我将如何根据用户在此页面上单击的项目将不同的参数传递给下一页？
@sharataka 这完全是一个不同的问题。发布一个新问题。
我只是问，因为我很好奇这种绑定方法是否会影响链接的完成方式。