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

我有一点JavaScript，可以为我构建一些HTML并将其插入到一个div中。我使用jQuery1.7.2进行此测试

我感兴趣的是在名为gene\u autocomplete\u field的输入文本字段上附加一个自定义更改或keyup事件处理程序

以下是我到目前为止所做的尝试

以下函数构建HTML，并将其插入名为gene_container的div中：

当我更改gene_autocomplete_字段中的文本时，refreshGenePicker函数只发送一个警报：

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

结果

如果我在gene_autocomplete_field元素中键入任何字母，事件处理程序似乎会无限次地调用alertval。我收到一个又一个警报，浏览器被对话框接管。返回的值是正确的，但我担心refreshGenePicker会被反复调用。我认为这是不正确的行为

问题

如何正确捕获一次keyup事件，以便一次只处理对autocomplete字段的内容更改？ 是否有其他活动可供我使用？ 更新

事实证明，不仅仅是13 Return/Enter的keyCode可能是一个问题——按下Control、Alt、Esc或其他特殊字符将触发事件，但就无限循环问题而言，将是无症状的。我筛选的基因名称中没有元字符。因此，我使用了从进一步的事件处理中筛选出非字母数字字符，其中包括返回键：

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

如果您使用的是jQuery>1.7，那么应该真正使用

退房

还有看看我的一些什么

此外，在测试equal时，您还应添加：

要回答您真正的问题：。不应该,；对于您提供的代码，您不能这样做。也许是别的什么地方出了问题。你能为这个问题设置一个JSFIDLE吗

查看后，您可能会发现您的代码有什么问题：

function refreshGenePicker(value) {
    console.log('keyup! Value is now: ' + value);
}

(function($) {
    var someHtml = '<input type="text" name="gene_autocomplete_field">';
    $('body').append(someHtml);

    $('body').on('keyup', 'input[name="gene_autocomplete_field"]', function(e) {
        refreshGenePicker($(this).val());
    });
})(jQuery);​

如果您使用的是jQuery>1.7，那么应该真正使用

退房

还有看看我的一些什么

此外，在测试equal时，您还应添加：

要回答您真正的问题：。不应该,；对于您提供的代码，您不能这样做。也许是别的什么地方出了问题。你能为这个问题设置一个JSFIDLE吗

查看后，您可能会发现您的代码有什么问题：

function refreshGenePicker(value) {
    console.log('keyup! Value is now: ' + value);
}

(function($) {
    var someHtml = '<input type="text" name="gene_autocomplete_field">';
    $('body').append(someHtml);

    $('body').on('keyup', 'input[name="gene_autocomplete_field"]', function(e) {
        refreshGenePicker($(this).val());
    });
})(jQuery);​

这个很好用。由于在标记中有了第二个代码块，您可能会多次运行它—这将导致它绑定多次，并且每次绑定时都会生成多个警报。当然，您可以在添加keyup之前使用.unbind，但我认为更好的解决方案是将所有代码分组到一个$document.ready中；以确保只绑定对象一次

这个很好用。由于在标记中有了第二个代码块，您可能会多次运行它—这将导致它绑定多次，并且每次绑定时都会生成多个警报。当然，您可以在添加keyup之前使用.unbind，但我认为更好的解决方案是将所有代码分组到一个$document.ready中；以确保只绑定对象一次

警报被称为无限次，因为您使用“回车”键确认/取消警报。改为使用.on'change'。这将防止在警报中使用enter时调用refreshGenePicker

单击“确定”以防止无限警报。 但是，“更改”事件只有在输入元素失去焦点时才会触发。如果要对每个键使用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());
});

这将过滤任何传入的enter键控事件。同时切换到.on和drop.live

编辑：请注意，有更多的可能性可以取消警报模式，例如退出或空格键。您应该在refreshGenePicker中添加一个检查值是否已实际更改。

警报被称为无限次，因为您使用“回车”键确认/取消警报。改为使用.on'change'。这将防止在警报中使用enter时调用refreshGenePicker

单击“确定”以防止无限警报。 但是，“更改”事件只有在输入元素失去焦点时才会触发。如果要对每个键使用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());
});

这将过滤任何传入的enter键控事件。同时切换到.on和drop.live

---

编辑：请注意，有更多的可能性可以取消警报模式，例如退出或空格键。您应该在refreshGenePicker中添加一个检查值是否实际发生了更改。

似乎。live被降价以支持。在上，您介意发布一个“似乎”。live被降价以支持。在上，您介意发布一个“否”，这对动态插入的HTML不起作用。只有在inp

---

ut元素已存在。不，这不适用于动态插入的HTML。这只在输入元素已经存在的情况下才起作用。文本字段上的返回捕获在哪个浏览器上？无法在Chrome上复制。我正在测试Safari 5.1.5和Chrome 18.0.1025.142。我在Chrome 20上可能就是这样。谢谢但是我仍然认为这是一种奇怪的行为，但是嘿，你要做什么：@RepWhoringPeeHaa:Firefox和Opera在Windows上的行为是一样的。InternetExplorer9不关心它，但它有点慢，我可以在事件触发之前键入asdfghj。事件传播的乐趣在于中断JavaScript方法提示、确认、警报：。@Anthony:-然而，模式对话框会被按键取消，它不会等待按键信号。在第一个演示中自己尝试一下，只需按住enter/esc/space。Hmmmz在哪个浏览器上，文本字段上的返回捕获是什么？无法在Chrome上复制。我正在测试Safari 5.1.5和Chrome 18.0.1025.142。我在Chrome 20上可能就是这样。谢谢但是我仍然认为这是一种奇怪的行为，但是嘿，你要做什么：@RepWhoringPeeHaa:Firefox和Opera在Windows上的行为是一样的。InternetExplorer9不关心它，但它有点慢，我可以在事件触发之前键入asdfghj。事件传播的乐趣在于中断JavaScript方法提示、确认、警报：。@Anthony:-然而，模式对话框会被按键取消，它不会等待按键信号。在第一个演示中自己尝试一下，只需按住enter/esc/space。

$(document).ready(function() {
    $('#test').html('<input id="text" />');
    $('#text').keyup(function() {
        console.log($(this).val());
    });
});​

$("#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());
});