为什么 jQuery ajax 请求在初始请求后中断？

Question

我在 cakephp 中有以下表格：

<div class="quickcontactDisplay">
<?php
    echo $form->create('Enquiry',array('action'=>'add','class'=>'quickcontact'));
    echo $form->hidden('visitor_id', array('value' => $visitor));       
    echo $form->input('name');
    echo $form->input('emailAddress',array('size' => 30));
    echo $form->input('enquiry');
    echo $form->end('Ok, I\'m done'); 
?>
</div>

如您所见，它包含在一个 div 中，类为 .quickcontactDisplay。

提交时，它会转到我的查询控制器的添加操作，并使用 jQuery 表单插件通过 ajax 执行此操作。这是我的 jQuery：

$(document).ready(function(){                          

    // bind 'quickcontact' and provide a simple callback function 
   $('form.quickcontact').ajaxForm(function(html) { 
        //updates the .quickcontactDisplay div with the action output.
        $('.quickcontactDisplay').html(html);
    }); 
});

此时查询控制器的实际操作并没有做很多事情，除了返回我的模型中设置的内置验证消息。 无论如何，这是代码：

function add() {
        $this->set('visitor', $this->Session->read("visitor"));
        if (!empty($this->data)) 
            {
                $this->Enquiry->create();
                if ($this->Enquiry->save($this->data)) 
                {
                    //echo 'success';
                    $this->layout = 'ajax';
                } 
                else 
                {
                    //echo 'fail';
                    $this->layout = 'ajax';
                }
            }
    }

我的问题：

当我提交表单时，它会使用错误消息更新我的 div，一切似乎都很好。但是，当我再次提交它时，它不会触发 ajax 调用，而只是直接提交给操作，导致页面仅包含操作输出 html。

以下是操作返回的内容：只有空表单和验证消息： （我认为是时候使用 pastebin 了，因为它有点啰嗦）

http://pastebin.com/m57401b13

似乎当 .quickcontactDisplay div 中包含的表单通过 ajax 更新时，它会破坏 ajax 绑定，并且不会再次启动。谁能看到这里会发生什么？谢谢。

Answer 1

你是对的。通过将 div 替换为其中的表单，任何绑定到旧内容的处理程序都将丢失。

看看 jQuery 的新 live() 函数，它将当前 和未来 匹配绑定到一个事件。

或者，只要将新的 HTML 插入 DOM 后重新应用绑定即可。例如

$(document).ready(function(){                                              

    function handleStuff(html)
    {
        //updates the .quickcontactDisplay div with the action output.
        $('.quickcontactDisplay').html(html);

        // re-do the form, as it has just been replaced
        $('form.quickcontact').ajaxForm(handleStuff);
    }

    // bind 'quickcontact' and provide a simple callback function 
    $('form.quickcontact').ajaxForm(handleStuff);
});

没有对此进行测试，但希望它会有所帮助。