Question

我创建了一个小应用，其导航UI类似于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不是页面或链接。

我会查看页面上的文档：

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>

jQuery Mobile doc和demos站点：箭头不可点击

2 个答案: