将 .keyup 绑定到动态创建的元素

Question

我已经看到了很多关于这个的问题，但我仍然很难过。我真的可以使用一些帮助来理解我在这里做错了什么。

（下面我的术语可能不正确）

我有一个 textarea 和一个按类名绑定到它的 .keyup 函数

第一个文本区域很好地触发了函数

然后我动态添加第二个文本区域，用于触发相同的功能

我的 .keyup 函数

$('.trans').keyup(function() {
    alert("Working");

});   

我了解以上内容不适用于新创建的 textarea，因为在绑定函数时它不是 DOM 的一部分。我已经尝试了几个其他问题的答案，但似乎无法正常工作：

我尝试过的其他方法：

// I also tried this   
// Neither textarea responds if this is used     
 $('.trans').on('keyup', '.newTrans', function() {
    alert("Working");
 }); 


// I also tried this 
// Only the first textarea responds    
 $('.trans').delegate('.newTrans', 'keyup', function(){
   alert("Working");
 });

这是一个 JSfiddle，如果需要，我会使用更多代码：

jSfiddle

Answer 1

.on() method 根本无法在您的小提琴中工作，因为您在引入 .on() 之前已经指定了旧版本的 jQuery。

如果您升级到更新版本的 jQuery（至少 1.7），您可以这样做：

 $(document).on('keyup', '.trans', function() {
    alert("Working");
 }); 

演示：http://jsfiddle.net/VFt6X/4/

如果您出于某种原因需要继续使用 v1.6.4，请改用 .delegate() method：

 $(document).delegate('.trans', 'keyup', function() {
    alert("Working");
 }); 

演示：http://jsfiddle.net/VFt6X/5/

请注意，无论哪种方式，您关心的元素的'.trans' 选择器都会作为参数传递给函数。左边的$(...) 部分必须指定一些已经存在的容器。我使用了document，但如果可能，最好指定更接近相关元素的内容，因此在您的情况下，您可以使用$("#centerNotes")。

Answer 2

试试这个：

$('.trans').live('keyup', function() {
    alert("Working");
});

http://jsfiddle.net/VFt6X/3/