title: jQuery inside fancy box ajax not working -- init problems
body: <p>This is my code to open a Fancybox that loads a page via ajax:</p>
  
  <pre><code>$('tr.record').click(function() {
      var record_id = $(this).attr("id");
      var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
      $.fancybox({
          'transitionIn': 'fade',
          'transitionOut': 'none',
          'type': 'ajax',
          'href': link,
          'onClosed': function() {
              parent.location.reload(true);
          }
      });
      $.bind("submit", function() {
  
          $.fancybox.showActivity();
  
          $.ajax({
              type: "POST",
              cache: false,
              data: $(this).serializeArray(),
              success: function(data) {
                  $.fancybox(data);
              }
          });
          return false;
      });
  });
  </code></pre>
  
  <p>The page inside the fancybox has a form including a text field with char counter:</p>
  
  <pre><code>&lt;form&gt;
  ...
  
  &lt;textarea name="exp_det" cols="90" rows="12" id="exp_det"&gt;&lt;/textarea&gt;
  &lt;span id="charLeft"&gt;150&lt;/span&gt; characters left
  
  &lt;/form&gt;
  </code></pre>
  
  <p>The parent page loads this via header:</p>
  
  <pre><code>$('#ext_det').keyup(function() {
      var len = this.value.length;
      if (len &gt;= 150) {
          this.value = this.value.substring(0, 150);
      }
      $('#charLeft').text(150 - len);
  });
  </code></pre>
  
  <p>So the issue is that this char counter (and other jQuery stuff like validation, datepicker) don't work inside the Fancybox. They do work if the page is loaded without Fancybox, or if it is loaded via Fancybox as inline.</p>
  
  <p>I understand this seems to be a reasonably common question, but I tried all solutions and none worked for me.</p>
  
  <p>I've tried</p>
  
  <ul>
  <li>using diferent IDs for the ajax page</li>
  <li>placing the char count script at the end of ajax page (it didn't even show</li>
  <li>on Firebug)</li>
  <li>placing the char count script as a function within <code>success</code></li>
  <li>other crazy iterations</li>
  </ul>
  
  <p>The problem seems related to re-init'ing the jQuery functions after the ajax page has loaded, since these elements were not there when the parent page was loaded.</p>
  
  <p>Any suggestions?</p>