拆分列表视图中的链接不可点击

Question

我有一个像下面这样的拆分列表视图（来自 JQM 示例）：

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
        <li><a href="index.html">
                <img src="images/album-bb.jpg" />
                <h3>Broken Bells</h3>
                <p>Broken Bells</p>
            </a>
            <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
            </a>
        </li>
        <li>
            <a id="secondListItem">
                <img src="images/album-hc.jpg" />
                <h3>Warning</h3>
                <p>Hot Chip</p>     
            </a>
            <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
            </a>
        </li>           
    </ul>

这会导致所有项目右侧带有齿轮按钮的 een 列表视图。 该示例（参见第一个列表项）使用 href 链接到另一个页面。这按预期工作。整个按钮都是可点击的。

但我想要的是在单击右侧按钮时运行一个 javascript 函数。 我已按如下方式附加了一个点击处理程序（请参阅第二个列表项）：

$('#secondListItem').click(function(){
    console.log('clicked!!');
});

现在，当我单击按钮的图标时，没有任何反应，单击按钮的其余部分可以正常工作。 问题在于 JQM 为使其美观而添加的内容。我尝试将 clickhandlers 放在 a 标签内的 span 上，但似乎没有任何效果。

那么，如何向右键添加点击处理程序？ （里的第二个a）

Answer 1

你可以试试：

$('#secondListItem').click(function(e){
    e.preventDefault();      // to prevent default browser load activity
    console.log('clicked!!');
});

或

$('ul').on('click', '#secondListItem', function(e){
    e.preventDefault();
    console.log('clicked!!');
});