What actually happens on re-render?

Question

I would like to know what actually happens on re-render (Ajax Call and DOM replacement) in Salesforce.

My Idea:

1. The ajax call is made to get data.
2. On completion of the ajax call, the DOM is constructed(the new part).
3. The DOM Element is updated/replaced.

Is the DOM updated or replaced?

My Scenario :

I have a Visualforce Page which has multiple input items. I binds keypress event to the input elements on document ready. An action function is present which re-renders a section of the page.

Now, the input elements in the re-rendered panel do not have a keypress event binding.

However, when I have the document.ready() script in the re-rendered output panel, the keypress event gets binded.

Can someone explain how exactly re-render works?

Answer 1

When a re-render occurs, only the portion of the DOM that is set to rerender is actually re-rendered. Therefore, any jQuery event bindings that you created on $(document).ready() are essentially lost for the portion of the DOM that was re-rendered. If you wrap these event binding calls in a function, it's easy to re-bind.

What I do in these scenarios is use the onComplete attribute of something like a commandLink to call a function to "re-bind" my event handlers. Here is an example...

<apex:commandLink action="{!doSomething}" rerender="Something" onComplete="bindEvents();">

And then my bindEvents function and also my $(document).ready()...

function bindEvents() {
  $('#myElement').click(function() {
    // implemtation
  });
}

$(document).ready(function() {
  bindEvents();
});

Answer 2

For this issue i use jQuery live function and don't care about DOM "updates":

<apex:inputText value="{!myVar}" id="myINput"/>

jQuery('[id$=myInput]').live('keypress', function(){
    ....
});