動的ボタンの機能をクリックしてライブ/オンが動作しない

Question

動的に生成されたボタンをクリックしたときに関数を実行しようとしています。それは何らかの理由で、私が使用しようとするどのような方法でも動作しないように見えます。

はJavaScript

//Generating the button 
$('<div><h3>Back<h3></div>') 
    .attr('class', 'rtext btn arrowback').attr('role', 'button').attr('id', '2') 
    .appendTo($(".row1")).hide().delay(800).fadeIn(1000); 

//function when button is clicked 
$(".row1").on("click", ".arrowback", function(){ 
    var userID = this.id; 
    alert(userID); 
}); 

私は、上記のように.on使用して試してみましたが、私はと.live使用して試してみました：

$(".arrowback").live("click", function(){ 
    var userID = this.id; 
    alert(userID); 
}); 

しかし、何も動作するようです。私の構文は間違っていますか？親と子の両方が動的に生成される場合

Answer 1

ああ、私は今、下記の意志機能を、それを解決した：

$(document.body).on("click", ".arrowback", function(){ 
    var userID = this.id; 
    alert(userID);  
}); 

Answer 2

発生要素は、動的にも作成最近の要素にイベントをバインドすることができます。このcodepenで

ルック：http://codepen.io/andtankian/pen/dXpZPR

$('div').append("<div></div>"); 
$('div>div').addClass("row1"); 

//Generating the button 
$('<div><h3>Back<h3></div>') 
    .attr('class', 'rtext btn arrowback').attr('role', 'button').attr('id', '2') 
    .appendTo($(".row1")).hide().delay(800).fadeIn(1000); 

//function when button is clicked 
$(".row1").on("click", ".arrowback", function(){ 
    var userID = this.id; 
    alert(userID); 
}); 

私は自分の環境をシミュレートし、すべてが正常に動作します。