How to execute javascript function from a dynamic html result? Jquery

Question

Please have a look at this code -

When I click on myLink I get a modal dialog window which shows the html as defined below. This html includes a button (id=test_button), and when I click on this button I want to do an ajax request. But its not working. So to test it I am just doing an alert but it wont work as well.

Also will it be possible to update existing dom element values (just populate a form) from within a test_button click function.

Thanks for your help.

$('#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

Try with Events/live:

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

Answer 2

The problem is that you're attempting to attach the click handler before the element exists.

As stated by CMS, you can either use .live() or you can add the click handler in your $('#myLink').click() function

Like so:

$('#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());
        });
});