0

以下のような分割リストビューがあります(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 関数を実行することです。次のようにクリックハンドラーをアタッチしました (2 番目のリスト項目を参照)。

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

ボタンのアイコンをクリックしても何も起こらず、残りのボタンをクリックしても問題なく動作します。問題は、JQM をきれいにするための追加部分にあります。タグ内のスパンにクリックハンドラを配置しようとしましたが、何も機能していないようです。

では、右のボタンにクリックハンドラを追加するにはどうすればよいでしょうか? (li の 2 番目の a)

4

1 に答える 1

0

あなたが試すことができます：

$('#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!!');
});
于 2012-07-18T16:16:12.587 に答える