title: Why is my jQuery focusout (or blur) event not being fired?
body: <p>At the bottom of the jsfiddle <a href="http://jsfiddle.net/clayshannon/jy6t5oru/34/" rel="nofollow">here</a>, I have this HTML:</p>
  
  <pre><code>&lt;input type="text" id="BLAboxPaymentAmount" value="2"&gt;
  &lt;/br&gt;
  &lt;input type="text" id="BLAboxSection5Total" value="3"&gt;
  </code></pre>
  
  <p>..and this jQuery:</p>
  
  <pre><code>$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
      var totalvalue = $(this).val();
      //alert("boxSection5Total val is " + totalvalue);
      var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
      //alert("Payment Total val is " + paymenttotalvalue);
      if (totalvalue !== paymenttotalvalue) {
          alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
      } else {
          alert("values ARE equal");
      }
  });
  </code></pre>
  
  <p>It works fine in the jsfiddle, but the event is not firing in my Sharepoint page - I enter a value in boxPaymentAmount ("5"), enter another in boxSection5Total ("6"), tab off of boxSection5Total, and I see no alert, as I should, based on this jQuery, which is virtually identical to what's in the jsfiddle:</p>
  
  <pre><code>$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
      alert("focusout event has fired");
      var totalvalue = $(this).val();
      var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
      if (totalvalue !== paymenttotalvalue) {
          alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
      }
  });
  </code></pre>
  
  <p>So the event is not even being fired - why not?</p>
  
  <p>I ran the page in Chrome and F12d, looking for err msgs in the console, but found none.</p>
  
  <h2>UPDATE</h2>
  
  <p>For A. (not "The") Wolff:</p>
  
  <p>This is how I create the elements in the code-behind:</p>
  
  <pre><code>boxPaymentAmount = new TextBox
  {
      CssClass = "dplatypus-webform-field-input"
  };
  </code></pre>
  
  <p>I also changed the "textarea" to "text" in the HTML in the jsfiddle.</p>
  
  <h2>UPDATE 2</h2>
  
  <p>For Jonathen (not Russell) Crowe:</p>
  
  <p>I changed my jQuery to the following:</p>
  
  <pre><code>$(document).on("blur", "[id$=boxSection5Total]", function (e) {
      alert("blur event has fired");
      console.log("blur event has fired");
      var totalvalue = $(this).val();
      var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
      if (totalvalue !== paymenttotalvalue) {
          alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
          console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
      }
      else {
          console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
      }
  });
  </code></pre>
  
  <p>...and still see nothing in the console from this event handler.</p>
  
  <h2>UPDATE 3</h2>
  
  <p>I have <em>many</em> other functions/handlers that fire just fine; so why this one doesn't is a conundrum. Maybe if I show what I've got (eliding some of the gory details), it may shed some light on what's going on (the failing function is the last/at the bottom):</p>
  
  <pre><code>$(document).ready(function () {
      console.log('The ready function has been reached; Requester and Payee Status sections should be slid up'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
  });
  
  /* NOTE: Things that need to take place after all the elements have been constructed need to go here; the ready function can be too early */
  $(window).load(function () {
      $('[id$=_AddressRows]').slideUp();
      $('[id$=panelSection2]').slideUp();
      $('[id$=panelSection3]').slideUp();
  
      $('[id$=ddlPayToVendor]').hide();
  });
  
  /* NOTE: this checkbox is only visible if they are not already authenticated; If they select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
  $(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
      var ckd = this.checked;
      . . . code elided for brevity
  });
  
  /* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form TODO: Should I change these from "change" to "click" */
  $(document).on("click", '[id$=rbPaymentForSelf]', function () {
      if (this.checked) {
      . . . code elided for brevity
      }
  });
  
  /* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
  $(document).on("click", '[id$=rbPaymentForSomeoneElse]', function () {
      if (this.checked) {
      . . . code elided for brevity
  
      }
  });
  
  $(document).on("click", '[id$=rbPaymentToIndividual]', function () {
      if (this.checked) {
          $('[id$=ddlPayToVendor]').slideUp();
          $('[id$=ddlPayToIndividual]').slideDown();
      }
  });
  
  $(document).on("click", '[id$=rbPaymentToVendor]', function () {
      if (this.checked) {
          $('[id$=ddlPayToIndividual]').slideUp();
          $('[id$=ddlPayToVendor]').slideDown();
      }
  });
  
  // Refactor this to populate the elements below (description, account codes, tax 1099); may pull from Lists rather than use the hardcoded vals, but if need to do the latter, see http://jsfiddle.net/clayshannon/x8npcpss/3/
  $(document).on("change", '[id$=ddlPayToIndividual]', function () {
      var value = $(this).val();
      . . . code elided for brevity
  
  });
  
  // Refactor this ... (see comment above)
  $(document).on("change", '[id$=ddlPayToVendor]', function () {
      var value = $(this).val();
      . . . code elided for brevity
  
  });
  
  /* Disallow anything other than 0..9 in the "SSN or ITIN" textbox */
  $(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
      var k = e.which;
      if (k &lt; 48 || k &gt; 57) { e.preventDefault(); }
  });
  
  $(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
      var textboxHeight = 15;
      . . . code elided for brevity
  
  });
  
  $(document).on("keyup", "[id$=explainPaymentTextBox]", function (e) {
      console.log("explainPaymentTextBox keyup reached");
      while ($(this).outerHeight() &lt; this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
          $(this).height($(this).height() + 1);
      };
  });
  
  HERE IS THE RECALCITRANT ONE (DOESN'T FIRE):
  /* Verify that amount in "Total" equals amount in Section 1 "Payment Amount"; this is not working at present; I first tried "focusout" instead of "blur" but neither event fires... */
  $(document).on("blur", "[id$=boxSection5Total]", function (e) {
      alert("boxSection5Total's blur event has fired");
      console.log("boxSection5Total's blur event has fired");
      var totalvalue = $(this).val();
      var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
      if (totalvalue !== paymenttotalvalue) {
          alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
          console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
      }
      else {
          console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
      }
  });
  </code></pre>