jqueryダイアログ内の独自のボタンが機能しない

Question

多くのテキストエリアと各テキストエリアのボタンが1つずつあるアプリケーションを作成しています。 ユーザーがコンテンツを編集すると、そのコンテンツはデータベースに保存されます。 ボタンをクリックすると、ダイアログボックスが開き、その特定の領域のコンテンツの以前のすべてのバージョンが表示されます。 これは、そのダイアログで.html（）によってロードされます。 これで、そのダイアログの各以前のバージョンにボタンが必要になりました。そのボタンをクリックすると、この以前のバージョンは「メイン」サイトのテキストエリアにコピーされます。

私の問題：私はボタンを作動させることができませんでした。 どこが間違っていますか？

[開く]ダイアログ、作業：

$(".historydialog").click(function(event) { 
    var idhist = $(this).attr('id'); 
    $("#dialog").dialog({ 
     open: function(event, ui) { 
      $.get("getLangHist.php", { idhist: idhist }, function(data) { 
       $("#divInDialog").html(data); 
      }); 
     }, 
     maxWidth:600, 
     maxHeight: 500, 
     width: 600, 
     height: 500 
    }); 
    event.preventDefault(); 
}); 

ダイアログのボタン：

<button id="history-{id}" class="historybutton"> 

ボタンアクション、動作していない：

$(".historybutton").click(function(event) { 
    alert('test'); 
}); 

Answer 1

あなたが追加していることに言及しますダイアログの内容を使用して.html()

これは、このような場合は、あなたが動的にDOM

にコンテンツを追加していることを暗示する、あなたはこれにあなたのclickハンドラを変更することができます。

$(document).on('click', '.historybutton', function(){ 
    alert('test'); 
}); 

これはにclickハンドラをバインドします動的に追加されたコンテンツ。

メモとして。区切られたIDでコントロールを覆うのではなく、"history-{id}"のようにdata-属性を使用できます。コードを見ているとはるかにはっきりしています。

だからあなたのボタンは次のようになります。

<button data-history-id="123" class="historybutton">history</button>

あなたはその後、jQueryの

var hId = $('.historybutton').data('history-id')でdata方法を使用して、これをアクセスすることができます。

Answer 2

この

$("body").delegate('.historybutton','click',function(event) { 
    alert('test'); 
});