How to attach event to newly created object

My UI consists in a combo box that displays a type of form. The form is then submitted using ajax. The callback displays the whole form again and other information. The probl开发者_开发技巧em is that the first submit works, but the second submit does not take into account the changes made in the form field.

• Select Form1 in the list
• Form1 is displayed with empty field
• User fill out the form and submit
• Form1 is displayed again with the information from the user and also other information
• User changes a field value and submit BUT the old data are submitted.

My current jQuery (I use the jQuery Form plugin):

$(document).ready(function() {
    // do stuff when DOM is ready
    var testCaseList = $('#testCaseId');
    testCaseList.live('change', function() {
       $.ajax({
           url: 'populateSteps.htm',
           type: 'GET',
           data: 'testCaseId=' + $(this).val(),
           success: function(data){
             $('#formContainer').html(data);
             var formId = $('#testCaseForm');
             var validateButton = $('#validateButton');
             validateButton.live('click', function() {
                 // prepare Options Object
                 var options = {
                     url: 'validateTestCase.htm',
                     success:    function(data) {
                         $('#formContainer').html(data);
                     }
                 };
                 // pass options to ajaxForm
                 alert(formId.formSerialize());
                 formId.ajaxSubmit(options);
             });
           }
       });
    });
  });

Basically after changing the value in the combo box, a form is displayed and a click event is attached to the form button. The click only submits the form.

I used the live method to attach the event because the form is displayed after each submit. I know it's not very AJAX but I had to do that because of Spring not handling well partial form.

I could do a better job by attaching the event to the newly created form using bind but I don't know where I should put the code. The form is displayed using a JSP, and I tried to put

   HTML/JSP code ...    <script type="text/javascript">
    $(document).ready(function() {
    // Attach the event to the form
    }    </script>

after the JSP code but the script is not executed.

EDIT The script is not executed because my script is wrong: missing );

<script type="text/javascript">
        $(document).ready(function() {
        // Attach the event to the form
        });    
</script>

Now it's working but I still wonder why the live binding use the old data from the form.

---

When I want to bind events to dynamically created objects I use the LiveQuery plugin like this :

   $('.zoom').livequery('click' , function(e){
      x = Math.round( e.pageX - $(this).offset().left);
      y = Math.round(e.pageY - $(this).offset().top);
      sendRequest(71609);
   });

LiveQuery : http://plugins.jquery.com/project/livequery