title: Elements keeping original values in jQuery objects after PostBack
body: <p>I am using <strong>ASP.NET 3.5</strong> combined with the atrocious <strong>UpdatePanel</strong>, <code>jQuery.delegate()</code>, and <strong>JavaScript</strong> object literals.</p>
  <p>I use <code>jQuery.delegate()</code> to persist the event handlers, which do get triggered after the <strong>PostBack</strong>, as expected.</p>
  <p>The issue is with the <strong>jQuery</strong> objects stored in object literal properties on <code>init()</code> where they keep the values they had prior to the <strong>ASP.NET PostBack</strong>.</p>
  <p>Here is my <strong>JavaScript</strong> :</p>
  <br />
  <h1>SFAIC</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC = 
  {
      masterPages: { cs: &quot;CS_&quot;, cp: &quot;CP_&quot; },
      contentPages: { cs: &quot;CSContent_&quot;, cp: &quot;CPContent_&quot; },
      
      isSecurePage  : false,
  
      $body         : undefined,
      $container    : undefined,
      $updatePanel  : undefined,
  
      $textBox      : undefined,
      $errorLabel   : undefined
  };
  </code></pre>
  <br />
  <h1>SFAIC.init()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.init = function () 
  { 
      log( &quot;--&gt; SFAIC.init() fired&quot; );
  
      var self = this; 
  
      self.$body        = $( &quot;body&quot; );
      self.$container   = self.$body.find( &quot;#container&quot; );
      self.$updatePanel = self.getCSMasterElement( &quot;UpdatePanel1&quot;, self.$container );
      self.$textBox     = self.getContentElement( &quot;TextBox1&quot; );
      self.$errorLabel  = self.getContentElement( &quot;ErrorLabel1&quot; );
       
      self.$updatePanel.delegate( self.$textBox.selector, &quot;blur&quot;, function () 
      { 
         self.validateRequired( self.$textBox, self.$errorLabel ); 
      });
      
      self.$textBox.focus();
  };
  </code></pre>
  <br />
  <h1>SFAIC.validateRequired()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.validateRequired = function ( $element, $errorLabel ) 
  {
      if ( $element.val().length === 0 ) { $errorLabel.text( &quot;Required&quot; ); }
      else { $errorLabel.text( &quot;&quot; ); }
  };
  </code></pre>
  <br />
  <hr />
  <p>Given the above, when <code>SFAIC.init()</code> is fired, <code>self.textBox</code> is assigned to its jQuery object.  I guess herein lies my confusion.  I thought that when you call <code>.val()</code>, it would return the value of what's in that element right then.  In the case where you make a call to the server and change the value of the control which then comes back rendering the changed value of the element, it seems that the jQuery object doesn't know about that change?</p>
  <p>Am I wrong here?</p>
  <p>What do I need to do to keep a real-time reference to the element, so that I can get the current value after the page is posted back?</p>
  <br />
  <p>Edit request per <strong>@DaveLong</strong> :</p>
  <br />
  <h1>SFAIC.getCSMasterElement()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.getCSMasterElement = function ( id, $context ) 
  { 
      return SFAIC.getElement( SFAIC.masterPages.cs, id, $context ); 
  };
  </code></pre>
  <br />
  <h1>SFAIC.getCPMasterElement()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.getCPMasterElement = function ( id, $context ) 
  { 
      return SFAIC.getElement( SFAIC.masterPages.cp, id, $context ); 
  };
  </code></pre>
  <br />
  <h1>SFAIC.getContentElement()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.getContentElement = function ( id, $context ) 
  { 
      return SFAIC.getElement
      ( 
          ( SFAIC.isSecurePage ) ? SFAIC.contentPages.cp : SFAIC.contentPages.cs, 
          id, 
          $context 
      ); 
  };
  </code></pre>
  <br />
  <h1>SFAIC.getElement()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.getElement = function ( page, id, $context ) 
  {
      selector = SFAIC.getElementIdSelector( page, id );
      
      return ( selector ) 
          ? ( $context &amp;&amp; $context.length ) 
              ? $context.find( selector ) 
              : SFAIC.$body.find( selector )
          : undefined;
  };
  </code></pre>
  <br />
  <h1>SFAIC.getElementIdSelector()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.getElementIdSelector = function ( page, id ) 
  { 
      var prefix = SFAIC.getElementPrefix( page );
      return ( prefix &amp;&amp; id ) ? &quot;#&quot; + prefix + id : undefined;
  };
  </code></pre>
  <br />
  <h1>SFAIC.getElementPrefix()</h1>
  <hr />
  <pre class="lang-js prettyprint-override"><code>SFAIC.getElementPrefix = function ( page ) 
  {   
      switch ( page ) 
      {
          case SFAIC.masterPages.cs : return SFAIC.masterPages.cs;
          case SFAIC.masterPages.cp : return SFAIC.masterPages.cp + SFAIC.masterPages.cs;
          case SFAIC.contentPages.cs : return SFAIC.masterPages.cs + SFAIC.contentPages.cs;
          case SFAIC.contentPages.cp : return SFAIC.masterPages.cp + SFAIC.masterPages.cs + SFAIC.contentPages.cs + SFAIC.contentPages.cp;                
      }
  };
  </code></pre>