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

Question

我已经看到了很多关于此的问题,但我仍然难以接受.我可以真正使用一些帮助来理解我在这里做错了什么.

(我的术语可能在下面不正确)

我有一个textarea和一个.keyup函数通过类名绑定它

这第一个textarea发射功能很好

然后我动态添加第二个textarea,用于触发相同的功能

我的.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()方法根本不适用于你的小提琴,因为你之前已经指定了旧版本的jQuery .on().

如果你升级到更新版本的jQuery(至少1.7),你可以这样做:

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

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

如果由于某种原因需要继续使用v1.6.4,请使用该.delegate()方法:

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

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

请注意,无论哪种方式,'.trans'您关注的元素的选择器都作为参数传递给函数.$(...)左侧的部分必须指定一些已存在的容器.我已经习惯了document,但如果可能的话,最好指出更接近有问题元素的东西,所以在你的情况下你可以使用$("#centerNotes").