jQuery如何將事件附加到新創建的對象

Question

我的UI包含一個組合框，用於顯示一種表單。 然后使用ajax提交表單。 回調再次顯示整個表單和其他信息。 問題在於，第一個提交有效，但第二個提交未考慮在表單字段中所做的更改。

• 在列表中選擇Form1
• Form1顯示為空字段
• 用戶填寫表格並提交
• 再次顯示Form1以及來自用戶的信息以及其他信息
• 用戶更改字段值並提交，但提交舊數據。

我當前的jQuery（我使用jQuery Form插件 ）：

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

基本上，在更改組合框中的值之后，將顯示一個表單並將click事件附加到表單按鈕。 單擊僅提交表單。

我使用live方法附加事件，因為該表單在每次提交后都會顯示。 我知道這不是很AJAX，但是由於Spring無法很好地處理部分形式，所以我不得不這樣做。

通過使用bind將事件附加到新創建的表單上，我可以做得更好，但是我不知道應該將代碼放在哪里。 表單是使用JSP顯示的，而我嘗試將

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

在JSP代碼之后但腳本未執行。

編輯該腳本未執行，因為我的腳本錯誤：missing）;

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

現在它可以工作了，但是我仍然想知道為什么live綁定使用表單中的舊數據。

Answer 1

當我想將事件綁定到動態創建的對象時，可以使用LiveQuery插件，如下所示：

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