Binding

Binding


Okay I'm sure this is simple, but I'm have trouble.
Here's the code. 1 XHTML with a button, 1 PHP script that loads a form
into a div, 1 JS file that implements jQuery to do everything.
index.html
--------------------------------------
<html>
<head>
<script src="http://jquery.com/src/jquery-latest.js"></script>
<script src="script.js"></script>
</head>
<body>
<input type="button" value="button" class="button" />
<div id="info"></div>
</body>
</html>
output.php
----------------------------------------
<?
echo"
<form>
    <input type='text' name='name' />
    <input type='submit' value='Submit' />
    <input type='button' class='cancel' value='Cancel' />
</form>
";
?>
script.js
---------------------------------------
$(document).ready(function() {
    $('#info').hide();
    $('.button').click(function() {
        $.ajax({
            method: "get",
            url: "output.php",
            success: function(output) {
                $('#info').append(output);
                $('#info').show('slow');
            }
        });
    });
});
After the php script loads the form into the div the cancel button
isn't bound to the script.js event. I need it to bind.
I read the article:
http://www.learningjquery.com/2008/05/working-with-events-part-2
This really just confused me though I'm sure the answer to my question
is in there somewhere.
Thanks in advance for any help!