在具有相同 class 的多个输入文本上触发 keyup 事件

Question

我有这样的风景：

<input type="text" id="quantity_2" maxlength="99" class="qty_item" value="0">
<input type="text" id="quantity_17" maxlength="99" class="qty_item" value="0">
<input type="text" id="quantity_16" maxlength="99" class="qty_item" value="0">

我正在尝试触发一个显示警报的 keyup 事件：

$(function() {

    $('input:text.qty_item').on('keyup', function() {
        alert("clicking quantity field!....");
    });

});

但它没有显示任何警报...这不应该识别从哪里按下一个键并触发警报或者在所有输入上具有相同的 class 名称会使 jquery 混淆识别按下键的元素？

在此先感谢大家！干杯! :-)

Answer 1

考虑以下代码。

$(function() {
  $("input[type='text'].qty_item").keyup(function() {
    console.log("Key Up - " + $(this).attr("id"));
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="quantity_2" maxlength="99" class="qty_item" value="0">
<input type="text" id="quantity_17" maxlength="99" class="qty_item" value="0">
<input type="text" id="quantity_16" maxlength="99" class="qty_item" value="0">

这按预期工作。您可能要考虑不使用伪 select 或者像 :text.

如果需要使用Delegate赋值，对于动态创建的项目，select最近的静态父元素。

$(function() {
  $(document).on("keyup", "input[type='text'].qty_item", function() {
    console.log("Key Up - " + $(this).attr("id"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="quantity_2" maxlength="99" class="qty_item" value="0">
<input type="text" id="quantity_17" maxlength="99" class="qty_item" value="0">
<input type="text" id="quantity_16" maxlength="99" class="qty_item" value="0">

在具有相同 class 的多个输入文本上触发 keyup 事件

Firing keyup event on multiple input text with same class

jquery