jQuery Mobile doc and demos site: arrows are not clickable

I have created a small app having navigation UI similar to jQuery Mobile site. I have a small issue with making clickable buttons. When you look at the main page of above link, you will see small arrows at the right-most section of each list item, the problem is these arrows are not clickable. How can I make them clickable.

My code looks like this:

<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

My guess would be that #link1 is not a page or a link.

I would look over the Docs on Pages:

• 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

• Live Example: http://jsfiddle.net/ZsSHE/

• Updated Example: 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 --> 

I ran into same situation, so this is my temporary fix

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