title: Jquery Event Not Triggering for DOM Elements Created after page load
body: <p>I have a page that trigger a calculate() function when a html5 number field is changed I have bound just about every event I can think of to it and it works for the originally loaded DOM elements. </p>
  
  <p>However, if I add elements after the dom is loaded the change functions do not trigger. </p>
  
  <p>I added a button that runs the calculate() function and when click it will run for the newly created elements as well as the original ones. </p>
  
  <p>So I know the code works but the event isn't firing for the newly created dom elements.</p>
  
  <p>Jquery Triggers</p>
  
  <pre><code>            $('.score').change(function() {
                  calculate();
              });
              $('.score').bind('keyup mouseup', function() {
                  calculate();
              });
              $('.score').mousewheel(function() {
                  calculate();
              });
              $('.score').click(function() {
                  calculate();
              });
              $('.score').keypress(function() {
                  calculate();
              });
  </code></pre>
  
  <p>Calculate Function</p>
  
  <pre><code>function calculate() {
              $("tbody tr").each(function() {
                  row_total = 0;
                  $(".score", this).each(function() {
                      row_total += Number($(this).val());
                  });
                  $(".total", this).val(row_total);
              });
              var arr = [];
              var row = 0;
              $("tbody tr").each(function() {
                  $(".total", this).each(function() {
                      arr[row] = $(this).val();
                      row += 1;
                  });
              });
              var sorted = arr.slice().sort(function(a, b) {
                  return b - a
              })
              var ranks = arr.slice().map(function(v) {
                  return sorted.indexOf(v) + 1
              });
              row = 0;
              $("tbody tr").each(function() {
                  $(".place", this).each(function() {
                      $(this).val(ranks[row]);
                      row += 1;
                  });
              });
              $("tbody tr").each(function() {
                  $(".place", this).each(function() {
                      var p = $(this).val();
                      switch (p) {
                          case '1':
                              $(this).css('background-color', 'gold');
                              break;
                          case '2':
                              $(this).css('background-color', 'silver');
                              break;
                          case '3':
                              $(this).css('background-color', '#8c7853');
                              break;
                          case '4':
                              $(this).css('background-color', 'white');
                              break;
                          default:
                              $(this).css('background-color', 'white');
                      }
                  });
              });
          }
  </code></pre>
  
  <p>genRow Function</p>
  
  <pre><code>function genRow(i)
          {
              var x = "";
              for (var j = 0; j &lt; i; j++) {
                  x += '&lt;tr class="competitors"&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="name" type="text" /&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="score" type="number" step="1" min="-100" max="100" value="0" /&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="score" type="number" step="1" min="-100" max="100" value="0" /&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="score" type="number" step="1" min="-100" max="100" value="0" /&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="score" type="number" step="1" min="-100" max="100" value="0" /&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="score" type="number" step="1" min="-100" max="100" value="0" /&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="total" type="text" value="0"/&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;td class="row"&gt;';
                  x += '&lt;input class="place" type="text" value="0"/&gt;';
                  x += '&lt;/td&gt;';
                  x += '&lt;/tr&gt;';
              }
              return x;
          }
  </code></pre>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;body&gt;
      &lt;table id="main"&gt;
          &lt;tr&gt;
              &lt;td class="header"&gt;
                  Name
              &lt;/td&gt;
              &lt;td class="header judge"&gt;
                  Judge 1
              &lt;/td&gt;
              &lt;td class="header judge"&gt;
                  Judge 2
              &lt;/td&gt;
              &lt;td class="header judge"&gt;
                  Judge 3
              &lt;/td&gt;
              &lt;td class="header judge"&gt;
                  Judge 4
              &lt;/td&gt;
              &lt;td class="header judge"&gt;
                  Judge 5
              &lt;/td&gt;
              &lt;td class="header btn"&gt;
                  &lt;input id="btn_Total" type="button" value="Total"/&gt;
              &lt;/td&gt;
              &lt;td class="header h_place"&gt;
                  Place
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="competitors"&gt;
  
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="7"&gt;&lt;/td&gt;
              &lt;td class="header btn"&gt;
                  &lt;input id="btn_AddRow" type="button" value="Add Row"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>