在数据标记上放置一个事件(单击)

Question

我有这段代码

<div id="toolbar" class="btn-group">
        <button class="btn btn-primary" type="button">Actions</button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a id="cancelPaymentAction" tabindex="0">Annuler</a></li>
            <li><a id="savePaymentAction" tabindex="0">Sauvegarder</a></li>
            <li class="divider"></li>
            <li><a tabindex="0">Payer</a></li>
            <li class="pull-right"><a data-payment-mode="CASH" tabindex="0">Comptant</a></li>
            <li class="pull-right"><a data-payment-mode="ATM" tabindex="0">Débit</a></li>
            <li class="pull-right"><a data-payment-mode="CREDITCARD" tabindex="0">Carte de crédit</a></li>
            <li class="pull-right"><a data-payment-mode="GIFTCARD" tabindex="0">Carte cadeaux</a></li>
            <li class="pull-right"><a data-payment-mode="CHECK" tabindex="0">Chèque</a></li>
        </ul>
    </div>

当我们找到数据支付模式标签时，我搜索一种点击方式。

Answer 1

我相信

您正在寻找与单击事件结合使用的属性选择器。在您的情况下，这看起来像这样：

$('[data-payment-mode]').click(function() {
    var paymentMode = $(this).attr('data-payment-mode');
    alert( 'Payment mode '+paymentMode+' selected' );
});

查看此操作 （JSFiddle）