Сайт с документами и демонстрациями jQuery Mobile: стрелки не активируются

Question

Я создал небольшое приложение с навигационным интерфейсом, похожим на jQuery Mobile . У меня есть небольшая проблема с нажатием кнопок. Когда вы посмотрите на главную страницу вышеуказанной ссылки, вы увидите маленькие стрелки в крайнем правом разделе каждого элемента списка, проблема в том, что эти стрелки не активируются. Как я могу сделать их кликабельными.

Мой код выглядит так:

<div data-role="content"> 
   <ul data-role="listview" data-inset="true" > 
      <li data-role="list-divider" style="background: #969696">Stuffs</li>
      <li> 
         <a href="#link1">
            <img   src="someImageURL" align="middle" />
            <h3>Stuff1</h3> 
            <p>Stuff1 description</p>
         </a>
      </li>
--- some <li> tags

Answer 1

Я думаю, что # link1 не является страницей или ссылкой.

Я бы посмотрел документы на страницах:

• http://jquerymobile.com/demos/1.0a4.1/#docs/pages/index.html
• http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html

• http://jquerymobile.com/demos/1.0a4.1/#docs/lists/lists-split.html

• Пример: http://jsfiddle.net/ZsSHE/

• Обновленный пример: http://jsfiddle.net/ZsSHE/13/

HTML

<div data-role="page" id="page1"> 
    <div data-role="header" data-theme="b"> 
        <h1>Page #1</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
            <ul data-role="listview"> 
                <li><a href="#page2">Page #2</a></li> 
                <li><a href="#page3">Page #3</a></li> 
            </ul> 
    </div><!-- /content --> 
</div><!-- /page --> 
<div data-role="page" id="page2"> 
    <div data-role="header" data-theme="b"> 
        <h1>Page #2</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
            <ul data-role="listview"> 
                <li><a href="#page1">Page #1</a></li> 
                <li><a href="#page3">Page #3</a></li> 
            </ul> 
    </div><!-- /content --> 
</div><!-- /page --> 
<div data-role="page" id="page3"> 
    <div data-role="header" data-theme="b"> 
        <h1>Page #3</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
            <ul data-role="listview"> 
                <li><a href="#page1">Page #1</a></li> 
                <li><a href="#page2">Page #2</a></li> 
            </ul> 
    </div><!-- /content --> 
</div><!-- /page --> 

Answer 2

Я столкнулся с той же ситуацией, так что это мое временное исправление

<script type="text/javascript">
$("div[data-role='page']").live('pagecreate', function(event){
    $('.ui-btn-inner > .ui-icon').bind('click', function() {
        $(this).prev().children('a.ui-link-inherit').click();
    });
});
</script>