Почему запрос 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.

При отправке он переходит к действию add моего контроллера запросов и делает это через 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';
                }
            }
    }

Моя проблема:

Когда я отправляю форму, она обновляет мой div сообщениями об ошибках, и все выглядит нормально. Однако, когда я отправляю его СНОВА, он не запускает вызов ajax, а просто отправляет его непосредственно действию, в результате чего получается страница, содержащая только HTML-код действия.

Вот что возвращает действие: только пустая форма и сообщения проверки: (Я думал, что пришло время для пастбина, поскольку это становится немного скучным)

http://pastebin.com/m57401b13

Кажется, что когда форма, содержащаяся в div .quickcontactDisplay, обновляется с помощью 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);
});

не проверял это, но, надеюсь, это поможет.