拆分列表視圖中的鏈接不可單擊

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>

這將導致所有列表右側帶有齒輪按鈕的列表視圖。 該示例（請參閱第一個列表項）使用href鏈接到另一個頁面。 這按預期工作。 整個按鈕是可單擊的。

但是我想要的是在單擊右側按鈕后運行javascript函數。 我已將clickhandler附加如下（請參閱第二個列表項）：

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

現在，當我單擊按鈕的圖標時，什么也沒有發生，單擊按鈕的其余部分都可以正常工作。 問題在於JQM所做的補充，以使其美觀。 我試圖將clickhandlers放在標簽內的跨度上，但是似乎沒有任何作用。

那么，如何在點擊按鈕上添加點擊處理程序？ （li中的第二個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!!');
});