title: jQuery function of $(selector) not updating the website/page
body: <p>I have the following jQuery code:</p>
  
  <pre><code>function preprocess(form) {
      $(form).find(".input input").each(function() {
          var required = $(this).attr("required");
          var checkField = $(this).closest("tr").children(".check");
          var errorField = $(this).closest("tr").children(".errormessage");
          if (required != undefined) {
              $(checkField).css("color", "#FFFF00");
              $(checkField).html("&amp;#x2718;");
              $(errorField).css("color", "#FFFF00");
              $(errorField).html("(Required)");
          }
          else {
              $(checkField).css("color", "#FFFF00");
              $(checkField).html("&amp;#x2714;");
              $(errorField).css("color", "#000000");
              $(errorField).html("");
          }
      });
  }
  </code></pre>
  
  <p>On a direct load of the page:</p>
  
  <pre><code>$(document).ready(function() {
      $("form").each(function() {
          preprocess($(this));
      });
  });
  </code></pre>
  
  <p>This works fine, as expected.</p>
  
  <p>Then it can also come through an AJAX load:</p>
  
  <pre><code>function loadPage(dataUrl) {
      $.ajax({
          url: "content/" + dataUrl + ".php",
          success: function(html) {
              setContent(html, dataUrl);
          },
          error: function(html, message) {
              $.ajax({
                  url: "content/notfound.php",
                  success: function(html) {
                      setContent(html, "notfound");
                  },
                  error: function(html, message) {
                      finalError(message);
                  }
              });
          }
      });
  }
  
  function setContent(html, url) {
      $(".middle .container .text").html(html);
      $(html).filter("form").each(function() {
          console.log($(this));
          preprocess($(this));
      });
      //only if you actually load a different page
      if (getCurrentFilename() != url) {
          window.history.pushState({
              "url": url
          }, "", url);
      }
  }
  </code></pre>
  
  <p>Here it does not work.</p>
  
  <p>I have debugged it and the <code>preprocess(form) { /* ... */ }</code> works as expected. However the 'updates' (<code>.css()</code>, <code>.html()</code>) do not work when it is being loaded dynamically.</p>
  
  <p>Anyone has any clue? I think it is kind of hard to make a JFiddle if I'm using AJAX though...</p>
  
  <p><strong>EDIT:</strong> Literal content received from AJAX request (outputting it to the console, I added <code>console.log(html)</code> at the top of <code>setContent(html, url) { /* ... */ }</code>):</p>
  
  <pre><code>&lt;h2&gt;Register&lt;/h2&gt;&lt;br&gt;
  &lt;p&gt;Please use different email and password than the ones you use for your Warframe account.&lt;br&gt;We do our utmost best to protect your account details, but everything can be hacked.&lt;/p&gt;&lt;br&gt;
  &lt;form name="register" method="post" data-rules="register" data-service="register" data-onsuccess="register_success"&gt;
  &lt;table class="accdet"&gt;
      &lt;tr&gt;
          &lt;td class="label"&gt;E-mail:&lt;/td&gt;
          &lt;td class="input"&gt;&lt;input type="email" name="email" required&gt;&lt;/td&gt;
          &lt;td class="check"&gt;&lt;/td&gt;
          &lt;td class="errormessage"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label"&gt;Warframe ingame name:&lt;/td&gt;
          &lt;td class="input"&gt;&lt;input type="text" name="ingame" required&gt;&lt;/td&gt;
          &lt;td class="check"&gt;&lt;/td&gt;
          &lt;td class="errormessage"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label"&gt;Password:&lt;/td&gt;
          &lt;td class="input"&gt;&lt;input type="password" name="password" required&gt;&lt;/td&gt;
          &lt;td class="check"&gt;&lt;/td&gt;
          &lt;td class="errormessage"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label"&gt;Password confirmation:&lt;/td&gt;
          &lt;td class="input"&gt;&lt;input type="password" name="passwordcheck" required&gt;&lt;/td&gt;
          &lt;td class="check"&gt;&lt;/td&gt;
          &lt;td class="errormessage"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="label"&gt;Kiosk available?&lt;/td&gt;
          &lt;td class="input"&gt;&lt;input type="checkbox" name="kiosk"&gt;&lt;/td&gt;
          &lt;td class="check"&gt;&lt;/td&gt;
          &lt;td class="errormessage"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br&gt;&lt;input type="submit" value="Submit" name="submit" class="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'll try and see if JFiddle in combination with AJAX is possible.</p>