Javascript 在动态html上添加Keypress/keydown事件

我的项目中有以下

动态输入html

  $(this).html("<input type='text' style='width:35px;' value='" + $(this).text() + "' />");

$（this.html（“”）；

现在，我正在尝试添加验证，以便在上面的输入文本字段中仅使用数字

但是作为jquery的新手我想知道如何添加按键事件

要使用以下验证对其进行验证吗

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

函数isNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}

我试着跟随，但似乎不起作用

$(this).html("<input type='text'  onkeypress='return isNumber(event)' style='width:35px;' value='" + $(this).text() + "' />");

$（this.html（“”）；

编辑

为仅使用数字添加验证的任何其他方法

使用

$(document).on("keypress","input[type=text]",isNumber);

// $(document) use closest parent for this

事件委派允许我们将单个事件侦听器附加到 父元素，该元素将为匹配 选择器，无论这些子体现在存在还是添加到 未来

使用

type=“number”

$（this.html（“”）；

您还可以对接受的数字设置限制：

---

请看这里

我的猜测是，您正在执行父元素事件（如单击）中的共享代码

因此，当您单击文本框时，单击（或类似事件）会冒泡到它的父对象，从而触发处理程序，该处理程序将用新的文本框替换文本框

您可以通过调用文本框的事件对象

onclick

的

stopPropagation（）

方法来防止它，如下所示：

$("#container").click(function () {
  $(this).html("<input type='text' onkeypress='return isNumber(event)' onclick='event.stopPropagation();' style='width:35px;' value='" + $(this).text() + "' />");});

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

$（“#容器”）。单击（函数（）{
$（this.html（“”；}）；
函数isNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}

---

@ViktorBahtev严重吗？？我看不出这两个问题之间有任何联系您想在动态生成的元素上添加事件，对吗？在建议的线程中，详细描述了如何执行该操作。将事件附加到某个现有DOM元素上，并将其委托给所需的元素-$（document）.on（'keypress'，'myactualselector'，eventHandler）@Richa您可能希望在添加

HTML

的地方提供代码，以区别于委托问题…希望答案有帮助。@Richa嘿Richa。。。尝试像flatty这样的定制设计。。你不必为这种验证编写新的代码。。他们提供几乎所有基本的东西。。wen我得到了一个..你是一开始想到的一个数据..我想Internet Explorer 9和早期版本不支持type=“number”。代码非常大，无法粘贴到这里。它是完整的graph@Richa是这样吗。。？是否在事件处理程序中追加文本框？我的代码$（'.clickme'）。单击（函数（）{if（$（this）.find（'input'）。长度==0）{$（this）.addClass（“cellEditing”）；initial=$（this）.text（）；$（this.html（“”；}）@Richa不知道我的答案？不幸的是不是：(

$("#container").click(function () {
  $(this).html("<input type='text' onkeypress='return isNumber(event)' onclick='event.stopPropagation();' style='width:35px;' value='" + $(this).text() + "' />");});

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}