Jquery -从列表中选择正确的类

Question

我有以下HTML：

<tr id="item-1">
     <td class="shopping-cart-quantity">
         <div class="product-quantity">
            <input id="product-quantity" data-area="item-1" data-product="1" type="text" value="3">
         </div>
    </td>
</tr>

<tr id="item-2">
     <td class="shopping-cart-quantity">
         <div class="product-quantity">
            <input id="product-quantity" data-area="item-2" data-product="2" type="text" value="3">
         </div>
    </td>
</tr>

<tr id="item-3">
     <td class="shopping-cart-quantity">
         <div class="product-quantity">
            <input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3">
         </div>
    </td>
</tr>

输入字段使用Twitter引导旋转和输入id=“”呈现如下：

<div class="input-group bootstrap-touchspin input-group-sm">
    <span class="input-group-btn">
        <button class="btn quantity-down bootstrap-touchspin-down" type="button">
            <i class="fa fa-angle-down"></i>
        </button>
    </span>
    <span class="input-group-addon bootstrap-touchspin-prefix"></span>
    <input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3" readonly="" class="form-control input-sm">
    <span class="input-group-addon bootstrap-touchspin-postfix"></span>
    <span class="input-group-btn">
        <button class="btn quantity-up bootstrap-touchspin-up" type="button">
            <i class="fa fa-angle-up"></i>
        </button>
    </span>
</div>

我的目标是获取数据区域值，这样我就可以将正确的数量应用到正确的产品上，不管我做什么，它总是返回表中的第一项。

这是我的JQuery：

$('.product-quantity').on('click','.input-group',function(){
        alert($('.input-group').find('#product-quantity').data("area"));
    });

Answer 1

在单击处理程序this中，单击了实际元素：

$('.product-quantity').on('click','.input-group',function(){
        alert($(this).find('#product-quantity').data("area"));
    });

但是实际的问题是有重复的is。这是无效的HTML和jQuery只能看到第一个。

用类替换id="product-quantity"并使用.product-quantity