Как связать использование jquery mobile?

У меня есть следующий код и я использую jquery mobile. Когда я нажимаю на элемент, он не идет на страницу «page2». Любые советы о том, как это исправить?Как связать использование jquery mobile?

<!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 -->

источник

2013-07-29 sharataka

Вашего связывание события рано, попробуйте использовать делегирование событий или связать его после того, как вы подключите его к DOM. – Jack

BTW: Чтобы избежать этого количества HTML в вашем скрипте, лучше использовать библиотеку шаблонов, такую как [mustache.js] (http://mustache.github.io/) или [handlebar.js] (http: // handlebarsjs .com /) – alexP

Ваша проблема заключается в том, что в то время ваше связывание ваше мероприятие в changePageButton оно еще не является частью DOM, вам необходимо делегирование событий либо использовать или связать его после того, как он был прикреплен к DOM.

При использовании делегирования событий, что вы делаете это связать событие с выше существующим элементом (до document при необходимости) в DOM и проверить селектор, когда событие всплывает вверх. Обратите внимание, что лучше привязать его к ближайшему элементам.

Например, вы можете использовать метод JQuery .on связать события, используя событие делегации

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

источник

2013-07-29 14:14:48 Jack

Когда я сгибаю его на более высокий существующий элемент, как бы я передавал разные параметры на следующую страницу, на основе того, какой элемент пользователь нажимает на эту страницу? – sharataka

Если вы спрашиваете, как получить, какой элемент был нажат, вы можете получить это из event.currentTarget (так же, как если бы вы напрямую привязывались к элементу). – Jack

Использовать событие делегирование потому, что вы создаете событие динамически;

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

источник

2013-07-29 14:14:16 dejavu

Когда я сгибаю его на более высокий существующий элемент, как бы передать другие параметры на следующую страницу, на основе того, какой элемент пользователь нажимает на эту страницу? – sharataka

@sharataka Это совсем другой вопрос. Отправьте новый вопрос. – dejavu

Я просто спрашивал, потому что мне было любопытно, может ли этот метод привязки повлиять на то, как делается привязка. – sharataka

Как связать использование jquery mobile?

ответ

Смежные вопросы