どのように動的HTMLの結果からjavascript関数を実行するには？ Jquery

Question

このコードを見てください -

私がmyLinkをクリックすると、下で定義されているhtmlを示すモーダルダイアログウィンドウが表示されます。このhtmlにはボタン（id = test_button）が含まれています。このボタンをクリックすると、ajaxリクエストを行います。 しかし、それは動作しません。それをテストするために、私は警告を出しているだけですが、うまく動作しません。

また、test_buttonのクリック機能の中から既存のdom要素の値を更新することもできます（フォームに入力するだけです）。

ありがとうございました。

$('#myLink').click(function(event) { 
    event.preventDefault(); 
    $('<div id="iContainer">Test: <input type="text" value="" id="test_text" /> 
     <input type="button" id="test_button" value="click" /></div>').appendTo('body');   
    $("#iContainer").dialog({     
     width: 600, 
     modal: true, 
     close: function(event, ui) { 
      $("#iContainer").remove(); 
      } 
     }); 
    }); 
    $('#test_button').click(function() { 
     alert('I am in Alert'); 
     //alert($('#test_text').val()); 
    }); 

Answer 1

Events/liveで試してみてください：

$('#test_button').live("click", function(){ 
    alert('test'); 
}); 

Answer 2

問題は、要素が存在する前に、クリックハンドラーを添付しようとしているということです。 CMSで述べたように

、あなたは（.liveを使用することができますいずれか）か、（ '＃のmyLink'）あなたの$にクリックハンドラを追加することができますので、同じように（）関数

をクリックします。

$('#myLink').click(function(event) { 
     event.preventDefault(); 
     $('<div id="iContainer">Test: <input type="text" value="" id="test_text" /> 
       <input type="button" id="test_button" value="click" /></div>').appendTo('body');     
     $("#iContainer").dialog({          
       width: 600, 
       modal: true, 
       close: function(event, ui) { 
         $("#iContainer").remove(); 
         } 
       }); 

     $('#test_button').click(function() { 
       alert('I am in Alert'); 
       //alert($('#test_text').val()); 
     }); 
});