我如何将keypress事件绑定到具有相同类的文本框

Question

我有一个表格，其中动态生成文本框。每行只有一个文本框。所有文本框都有相同的类（qt），表格单元格有一个类（qty）。我想绑定一个按键事件，所以到目前为止只能输入数字我已经编码了一下，如下所示，请帮忙。

 $("#qt").keypress(function(e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

            return false;
        }
    });

Answer 1

你应该使用event delegation，因为元素是动态创建的

$(document).on("keypress", ".qty", function (e) {
 //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

        return false;
    }

 });

事件委托允许您将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

Answer 2

使用jquery你可以这样做：

 $(document).on('keypress','.qt',function(e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

            return false;
        }
    });

Fiddle DEMO using jquery 1.10.1

Answer 3

您可以使用事件委派 -

$(document.body).on('keypress','.qt'function(e) {
 // do your stuff here
});

• https://learn.jquery.com/events/event-delegation/

Answer 4

使用.指定类，而不是# - 用于ID。由于文本框是动态生成的，因此您需要使用事件委派：

$("#tableID").on('keypress', ".qt", function(e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        return false;
    }
});