jQuery如何将事件附加到新创建的对象

时间:2011-02-07 17:22:03

标签: javascript jquery javascript-events

我的UI包含一个显示表单类型的组合框。然后使用ajax提交表单。回调再次显示整个表单和其他信息。问题是第一次提交有效,但第二次提交没有考虑表单字段中所做的更改。

  • 在列表中选择Form1
  • Form1显示为空字段
  • 用户填写表格并提交
  • Form1再次显示来自用户的信息以及其他信息
  • 用户更改字段值并提交,但提交旧数据。

我当前的jQuery(我使用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);
             });
           }
       });
    });
  });

基本上在更改组合框中的值后,将显示一个表单,并在表单按钮上附加一个单击事件。点击仅提交表单。

我使用live方法附加事件,因为每次提交后都会显示表单。我知道它不是非常AJAX,但我必须这样做,因为Spring没有处理好部分形式。

我可以通过使用bind将事件附加到新创建的表单来做得更好,但我不知道应该在哪里放置代码。表单使用JSP显示,我试图放

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

在JSP代码之后但脚本没有执行。

编辑脚本未执行,因为我的脚本错误:缺少);

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

现在它正在运行,但我仍然想知道为什么live绑定使用表单中的旧数据。

1 个答案:

答案 0 :(得分:0)

当我想将事件绑定到动态创建的对象时,我使用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