jquery - ボタンを追加した後に関数を呼び出す

Question

イベントが button1 をクリックしたときに jQuery コードに HTML elemnet button2 を追加し、別の HTML 要素を DIV に追加して、最初のボタンは実行されますが、2 番目のボタンは実行されません。この問題を解決するには？

問題の例

var button2='<input type="button" vale="add" id="idbutton2" >';
$('#idbutton1').click(function(){
  $('#divid1').html(button2);
});

$('#idbutton2').click(function(){
  $('#divid2').html("text");
});

button2 が DIV に追加され、button2 をクリックしたときに jQuery を実行したいと考えています。

Answer 1

次のように変更します。

$('#divid1').on('click', '#idbutton2', function(){
    $('#divid2').html("text");
});

Answer 2

代わりに使用.onして、イベント ハンドラーを委任します。

$(document).on('click', '#idbutton2', function(){
  $('#divid2').html("text");
});

または、button2 に直接バインドすることもできます。

var button2= $('<input type="button" vale="add" id="idbutton2" >').click(function(){
  $('#divid2').html("text");
});

$('#idbutton1').click(function(){
    $('#divid1').html(button2.html());
});