jquery - Jquery Mobile 导航栏绑定导致多个点击事件和随机行为

Question

使用 Jquery Mobile 1.0b

<div class="navSubBars" id="cat0Nav" data-role="navbar" style=" padding-top: 2px;">
  <ul>
    <li>item1
    <li>item2
    <li>item3
    <li>item4
 </ul>
</div>

$('.navSubBars>ul>li>a').live('vclick',function() {
  var subMenuItem = $(this).text();
  alert(subMenuItem);
});

第一次单击事件会触发警报。单击页面上的任何其他项目（锚点），然后立即触发另一个单击事件。随后的点击会间歇性地正确触发，有些根本不会触发警报。很随意。

我需要它来在同一页面上的 div 中加载动态内容，以防万一。

我曾尝试将取消绑定链接到绑定、停止传播并返回 false 以及不同的选择器，但均未成功。

我正在寻找解决方法、修复方法或更好的方法。谢谢。

Answer 1

You li 标签不是有效的 HTML。

现场示例：

• http://jsfiddle.net/qedNv/

HTML：（添加一个类属性来访问每个 li）

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content">        
        <div class="navSubBars" id="cat0Nav" data-role="navbar" style=" padding-top: 2px;">
            <ul>
                <li class="click-li">item1</li>
                <li class="click-li">item2</li>
                <li class="click-li">item3</li>
                <li class="click-li">item4</li>
            </ul>
        </div>
    </div>
</div>

JS：

$('.click-li').live('vclick', function() {
   var subMenuItem = $(this).text();
    alert('Sub Menu Item: '+subMenuItem);
});