Javascript 用于动态添加输入字段的keyup函数

我试图为动态添加的输入字段实现keyup函数，但它不起作用

html代码

<table  border="1" id="table">
<colgroup>
<col width="100"/>
<col width="100"/>
</colgroup>
<tr>
<td style="text-align:center;">Activity</td>
<td style="text-align:center;">Time</td>
</tr>
<tr>
<td style="text-align:center;">
<select id="activity[]">
<option value="Working">Working</option>
<option value="Leave">Leave</option>
</select>
</td>
<td style="text-align:center;"><input style="width:35px;" type="text" class="text" maxlength="3" id="day1[]"/></td>
</tr>
</table>
<br><br>
<input type="button" value="+" id="plus" />

活动
时间
工作
离开

jquery代码

$("#plus").click(function(e){

$("#table").append("<tr><td style='text-align:center;'><select id='activity[]'><option value='Working'>Working</option><option value='Leave'>Leave</option></select></td><td style='text-align:center;'><input style='width:35px;' type='text' class='text' maxlength='3' name='day1' id='day1[]'/></td></tr>");
e.preventDefault();


});
$.each($('[id^=day1]'), function (i, item) {
         $("[id*='day1']").keyup(function () {
         if (this.value.match(/[^a-zA-Z.]/g)) {
            this.value = this.value.replace(/[^a-zA-Z.]/g, '');

        }
        });

        });

$（“#plus”）。单击（函数（e）{
$（“#表”）.append（“WorkingLeave”）；
e、 预防默认值（）；
});
$。每个（$（'[id^=day1]'）、函数（i，项）{
$（“[id*='day1']”）。键控（函数（）{
if（此.value.match（/[^a-zA-Z.]/g））{
this.value=this.value.replace（/[^a-zA-Z.]/g'，）；
}
});
});

见演示

我也试过这个解决方案，但它也不起作用。

试试这个

$.each($('[id^=day1]'), function (i, item) {
                 $(document).on('keyup', '[id*="day1"]',function () {
                 if (this.value.match(/[^a-zA-Z.]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z.]/g, '');

                }
                });

---

对于动态控件，您需要在文档级别绑定事件，如下所示：

$(document).on("keyup","[id*='day1']",function() { 
    // code goes here...
});

或者你也可以用身体

 $('body').on("keyup","[id*='day1']",function() { 
        // code goes here...
 });

事件处理程序仅绑定到当前选定的元素；在代码调用.on（）时，它们必须存在于页面上。因此，在下面的示例中，#dataTable tbody tr必须在生成代码之前存在

如果将新HTML注入页面，则可以使用委派事件来附加事件处理程序，如下所述

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。例如，如果表存在，但行是使用代码动态添加的，则以下操作将对其进行处理：

除了能够处理尚未创建的子元素上的事件外，委托事件的另一个优点是，当必须监视许多元素时，它们的开销可能会低得多。在tbody中有1000行的数据表上，第一个代码示例将处理程序附加到1000个元素。委派事件方法（第二个代码示例）只将事件处理程序附加到一个元素tbody，事件只需要向上冒泡一个级别（从单击的tr到tbody）

• 礼节：

---

使用事件委派，并且元素的ID必须是唯一的。。因此，从输入字段中删除id

$(document).on('keyup', 'input[name="day1"]'function () {
    if (this.value.match(/[^a-zA-Z.]/g)) {
        this.value = this.value.replace(/[^a-zA-Z.]/g, '');
    }
});

---

您需要在plus-click调用中添加处理程序

您的其他代码只运行一次

或者看

直播

：

---

将委托与on（）方法结合使用您能提供一些示例吗？我尝试了这些方法，但它也不起作用，我让示例检查我尝试的方法是否正确。因此，下次发布您失败的尝试时，不要只询问代码。我没有投反对票或投票结束，因为我想你不知道，但是：“询问代码的问题必须证明对正在解决的问题的最低理解。包括尝试的解决方案，为什么它们不起作用，以及预期的结果。”@user2979046你如何在html中将id分配为数组？是否可以在html中使用类似于“id=”activity[]”的id？live已被折旧，并且已引入。请具体说明不推荐使用的版本。从

jQuery 1.7

开始，只有

.live（）

方法不推荐使用。因此，对于较旧版本的jQuery，您仍然可以使用

.live（）

很抱歉，我从来没有使用过这两种方法-我一直知道它是“live”。真正的答案是在添加dom元素时将处理程序添加到dom元素中，这是我首先推荐的。感谢您的良好解释，您可以在这一解释中再添加一点，说明支持

.on（）

的版本。它由jquery1.7支持。