Question

我尝试为动态添加的输入字段实现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, '');

        }
        });

        });

参见演示here

我尝试过soln here，但它也没有用。

Answer 1

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

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

或者你也可以使用身体。

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

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

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

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。例如，如果表存在，但是使用代码动态添加行，则以下将处理它：

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

礼貌：StakcOverFlow Link

Answer 2

试试这个

$.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, '');

                }
                });

DEMO

Answer 3

使用事件委托，元素的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, '');
    }
});

Answer 4

您需要在加号点击调用中添加处理程序。

您的其他代码只能运行一次。

或者看看live： http://api.jquery.com/live/

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

4 个答案: