将事件处理程序绑定到动态加载的输入答案

【问题标题】：Binding an event handler to dynamically loaded input将事件处理程序绑定到动态加载的输入
【发布时间】：2013-05-12 04:25:23
【问题描述】：

我有一个分页输入字段，它是在从主页进行 ajax 调用以加载一些数据后动态创建的。输入字段的类为goto。

所以它是这样的： - 主页有一个脚本，其函数名为loadData() - 当用户进行 ajax 调用时，通过 ajax 从数据库中拉出一个表。 - 此 ajax 数据包括分页选项卡 (First,Prev,Next,Last)，以及用户可以在其中输入页码的 .goto 字段。当用户输入页码时，应该调用主页面的 loadData() 函数。

这是我的代码（在主页上）：

$('.goto').bind('keydown', function(e){
        console.log(e.which);
        if(e.which==13)
        loadData($(this).val());
    });

但是什么也没发生。没有控制台消息，什么都没有。

【问题讨论】：

标签： javascript jquery live

【解决方案1】：

如果元素是动态创建的，则应使用on() 方法，同时使用event delegation 将事件绑定到元素。

在你的情况下，以下应该有效：

$(document).on('keydown', '.goto', function(e){
    console.log(e.which);
    if(e.which==13)
    loadData($(this).val());
});

【讨论】：