如何为动态插入的"input"文本元素正确捕获onchange或onkeyup事件？

Question

我有一些JavaScript为我构建一些HTML并将其插入到一个div.我正在使用jQuery 1.7.2进行此测试.

我有兴趣在input名为的文本字段上附加自定义更改或keyup事件处理程序gene_autocomplete_field.

这是我到目前为止所尝试的内容.

以下函数构建HTML,将其插入到div被调用的gene_container:

function buildGeneContainerHTML(count, arr) {
    var html = "";
    // ...
    html += "<input type='text' size='20' value='' id='gene_autocomplete_field' name='gene_autocomplete_field' placeholder='Enter gene name...' /><br/>";
    // ...
    return html;
}

// ...
$('#gene_container').html( buildGeneContainerHTML(count, geneNameArr) );

在我的调用HTML中,我gene_autocomplete_field从gene_container元素中获取,然后我覆盖keyup事件处理程序gene_autocomplete_field:

<script>
    $(document).ready(function() {
        $("#gene_container input:[name=gene_autocomplete_field]").live('keyup', function(event) {
            refreshGenePicker($("#gene_container input:[name=gene_autocomplete_field]").val());
        });
    });
</script>

当我更改文本时gene_autocomplete_field,该refreshGenePicker()函数只发送一个警告:

function refreshGenePicker(val) {
    alert(val);
}

结果

如果我在gene_autocomplete_field元素中键入任何字母,事件处理程序似乎alert(val)无限次调用.我接着一个警报,浏览器被对话框接管.返回的值是正确的,但我担心refreshGenePicker()会一遍又一遍地调用.这是不正确的行为,我不这么认为.

问题

• 如何正确捕获keyup事件一次,以便我只处理一次对自动填充字段的内容更改？
• 我应该为此目的使用不同的事件吗？

---

UPDATE

事实证明,不仅仅是keyCode13(返回/回车)中的一个可能是一个问题 - 按Control,Alt,Esc或其他特殊字符将触发一个事件(但就无限循环问题而言,将是无症状的).我过滤的基因名称中没有元字符.所以我利用字母数字检测测试从进一步的事件处理中过滤掉非字母数字字符,其中包括Return键:

if (!alphaNumericCheck(event.keyCode)) return;

Answer 1

alert被称为无限次,因为您使用"Enter"键来确认/取消警报.请.on('change')改用.这样可以防止refreshGenePicker在使用enter时调用alert.

• JSFiddle演示使用keyup(单击确定以防止无限警报).
• JSFiddle演示使用 change

但是,'change'只有输入元素失去焦点时才会触发事件.如果要refreshGenePicker在每个键上使用,请使用以下方法:

$("#gene_container input:[name=gene_autocomplete_field]").live('keyup', function(event) {
    if(event.keyCode === 13) // filter ENTER
        return;
    refreshGenePicker($("#gene_container input:[name=gene_autocomplete_field]").val());
});

这将过滤任何传入的输入keyup事件(jsFiddle演示).同时切换到.on落.live.

编辑:请注意,有更多的可能解雇alert模态,如escape或space键.您应该在您refreshGenePicker的值是否实际更改中添加一个检查.