为什么jQuery ajax请求在初始请求后中断?
问题描述:
我在CakePHP的以下形式:为什么jQuery ajax请求在初始请求后中断?
<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>
正如你所看到的,它包裹在带班.quickcontactDisplay一个div。
在提交时,它会转到我的查询控制器的添加操作,它通过ajax使用jQuery表单插件执行此操作。继承人我的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';
}
}
}
我的问题:
当我提交表单,它更新我的分度,错误消息,并且一切似乎都很好。但是,当我再次提交它时,它不会触发ajax调用并直接提交给操作,导致只包含操作输出html的页面。
继承人什么动作返回:只需将空的形式和验证消息: (我想是时候了引擎收录其变得有点啰嗦)
看来,当包含在.quickcontactDisplay div中的表单通过ajax更新,它打破了ajax绑定,并且不会再次踢入。任何人都可以看到这里会发生什么?谢谢。
答
你说得对。通过用其中的表单替换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);
});
没有测试过,但希望它会有所帮助。
看起来它会帮我,但我恐怕我需要问如何调整上面的js来使用它。 :p – 2009-06-23 15:28:11