jqueryで.htmlのボタンが機能しない

Question

ページに2つのボタンを追加します。最初のボタンをクリックすると、コンテンツ（別のボタンを含む）がユーザーに表示されます。問題はここにあります：2番目のボタンは、このコンテンツには動作しません。アラートはユーザーに表示されていません。

Demo : http://jsfiddle.net/k5bL7pkj/5/ 

Answer 1

後で。

例：

$('body').on('click', '#ss', function() { 
    alert("TEST"); 
    }); 

Fiddle

Answer 2

これは、要素が実行時に作成されるため、要素を作成した後にイベントを追加する必要があるためです。

このコードを試してみてください：

$(document).ready(function(){ 
    $("#aa").click(function() { 
     var imgUrl = $(this).data('rel'); 
     $("#area").html("<img src='" + imgUrl + "' alt='description' /><button id='ss'>SSSSS</button>"); 

     $('#ss').click(function() { 
      alert("TEST"); 
     }); 

    }); 

}); 

結果：ます。次に、ページ上に存在するものにイベントハンドラをアタッチ存在する可能性がある要素にダウンイベントをフィルタする必要がhttp://jsfiddle.net/k5bL7pkj/8/

Answer 3

常に文書上のすべてのあなた "をクリックし、変更またはからkeyup" 機能を使用し、それは将来的にあなたを助ける...

$(document).on('click','#aa', function() { 
    var imgUrl = $(this).data('rel'); 
    $("#area").html("<img src='" + imgUrl + "' alt='description' /><button id='ss'>SSSSS</button>"); 
}); 

$(document).on('click','#ss', function() { 
    alert("TEST"); 
});