javascript - 動的に作成された要素に .keyup をバインドします

Question

これについてたくさんの質問を見てきましたが、まだ困惑しています。ここで何が間違っているのかを理解するのに、私は本当に助けを使うことができます。

（私の用語は以下で正しくないかもしれません）

クラス名でバインドされた textarea と .keyup 関数があります

この最初のテキストエリアは、関数を正常に起動します

次に、同じ関数を起動することを目的とした2番目のテキストエリアを動的に追加します

私の .keyup 関数

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

});   

関数がバインドされたときに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