如何使用JQuery为动态生成的多个文本框绑定Keypress事件？

原始代码 #

PHP 动态生成文本框代码 #

if(mysqli_num_rows($result)>0)
{
    $count=1;
while($row = mysqli_fetch_row($result))
    { ?>
<input type="number"  name="marks[]" value="" id="marks'+count+'" min="0">
    <?php
    $count++;
    }
}

原JQuery代码 #

$(document).ready(function(){ 
  $("#marks'+count+'").keypress(function(){
       alert("Key is pressed");
   });
    });

解决方案 #

首先要修正PHP代码里的ID生成错误：原代码里id="marks'+count+'"是把JS语法混到PHP里了，正确写法应该用PHP输出变量，改成：

<input type="number" name="marks[]" value="" id="marks<?php echo $count; ?>" min="0">

接下来提供两种实用的绑定方式：

1. 事件委托（推荐） #

利用事件冒泡特性，给父容器（或document）绑定事件，匹配所有动态生成的文本框。这种方式不管元素是提前渲染还是后续动态添加的，都能生效：

$(document).ready(function(){
  // 建议用文本框的父元素代替document，比如文本框都在id为mark-container的div里，就用$("#mark-container")
  $(document).on("keypress", "input[name='marks[]']", function(){
    alert("Key is pressed");
    // 用$(this)可以获取当前触发事件的文本框，比如打印它的ID
    console.log("当前输入框ID：" + $(this).attr("id"));
  });
});

2. 生成元素时直接绑定 #

方式A：内联事件绑定

修改PHP代码，给每个文本框添加onkeypress属性：

if(mysqli_num_rows($result)>0)
{
    $count=1;
while($row = mysqli_fetch_row($result))
    { ?>
<input type="number" name="marks[]" value="" id="marks<?php echo $count; ?>" min="0" onkeypress="handleKeypress(this)">
    <?php
    $count++;
    }
}

然后添加对应的JS函数：

function handleKeypress(element){
  alert("Key is pressed");
  console.log("当前操作的输入框：" + element.id);
}

方式B：通过类选择器批量绑定

给所有动态文本框加一个共同的类，比如mark-input：

<input type="number" name="marks[]" value="" id="marks<?php echo $count; ?>" class="mark-input" min="0">

然后在页面加载完成后绑定事件（注意：这种方式要求绑定事件时，所有动态文本框已经生成完毕）：

$(document).ready(function(){
  $(".mark-input").keypress(function(){
    alert("Key is pressed");
  });
});

原代码问题说明 #

原JQuery代码里的$("#marks'+count+'")存在两个问题：

1. JS无法直接访问PHP的count变量，选择器语法错误；
2. 即使语法正确，循环结束后count是最后一个值，只能绑定到最后一个文本框，前面的元素都无法触发事件。

内容的提问来源于stack exchange，提问作者Sikander Shahzad