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 中加载动态内容，以防万一。

我已经尝试将一个 unbind 链接到绑定、停止传播并返回 false 以及不同的选择器，但都没有成功。

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

Answer 1

你的 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);
});