title: jQuery events not working within iframe?
body: <p>I am having some issues with <code>focus(function(){})</code> and <code>blur(function(){})</code> within a script that is nested within a dynamically loaded iframe..</p>
  
  <p>Below is the script tag WITHIN the iframe being dynamically loaded. Any event I throw into the script markup is not working, simple things like a <code>$('input').click(function(){alert('fired')});</code> will not even run. I am not sure what is going on.</p>
  
  <p>Yes, jQuery is being loaded into the iframe in the head.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // &lt;![CDATA[
      $(document).ready(function() {
  
          $('.form .field-content').find('input, select, textarea').focus(function() {
              $(this).closest('.field').addClass('focused');
          });
  
          $('.form .field-content').find('input, select, textarea').blur(function() {
              $(this).closest('.field').removeClass('focused');
          });
  
          $('.form .field-content').find('input, select').keypress(function(e) {
              if (e.which == 13) {
                  e.preventDefault();
                  $(this).closest('.form').find('.button').first().click();
              }
          });
  
          $('.form .button').focus(function() {
              $(this).addClass('focused');
          });
  
          $('.form .button').blur(function() {
              $(this).removeClass('focused');
          });
  
          // focus on first field
          $('.form .field-content').find('input, select, textarea').first().focus();
  
      });
  // ]]&gt;
  &lt;/script&gt;
  </code></pre>