0

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

2 回答 2

1

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

当您使用事件委托时，您所做的是将事件绑定到更高的现有元素（document如有必要），DOM并在事件冒泡时检查选择器。请注意，最好将其绑定到最近的较高元素。

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

$(document).on('click','.changePageButton', function() {
    $.mobile.changePage("#page2");
});
于 2013-07-29T14:14:48.583 回答
0

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

$(function() {
      $("body").on('click', '.changePage', function() {
          $.mobile.changePage("#page2");
          });        
      });
于 2013-07-29T14:14:16.037 回答