title: Dynamic Input Checkbox on change event
body: <p>I have a table of checkboxes that are being paginated through AJAX. I am trying to create an on click event for one of these new checkboxes being clicked. When it is clicked, I am going to need to an update an array of IDs based on that standard's ID.</p>
  
  <p>The problem is, I can't figure out how to get my Javascript to respond when the inputs are populated after the AJAX call. If I load up the inputs in the view, the on click event works fine, but if it comes back through AJAX, it isn't recognized.</p>
  
  <p>I have looked through several similar issues including:</p>
  
  <ul>
  <li><a href="http://api.jquery.com/on/" rel="nofollow noreferrer">http://api.jquery.com/on/</a></li>
  <li><a href="https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements">Event binding on dynamically created elements?</a></li>
  <li><a href="https://stackoverflow.com/questions/14510882/alert-after-checked-input-checkbox">Alert after checked input checkbox</a></li>
  </ul>
  
  <p>I could not find solutions to my problem from any of the above. I can't determine what is missing here.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table summary="Standard Listing Table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th scope="col"&gt;&lt;/th&gt;
              &lt;th scope="col"&gt;Code&lt;/th&gt;
              &lt;th scope="col"&gt;Description&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="pl-standard-listing"&gt;
          &lt;tr&gt;
               &lt;td&gt;
                    &lt;input checked="" name="standards[]" type="checkbox" value="8343"&gt;
               &lt;/td&gt;
               &lt;td&gt;K.CC.A.1&lt;/td&gt;
               &lt;td&gt;Count to 100 by ones and by tens.&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Jquery on click event</strong></p>
  
  <pre><code>$('#pl-standard-listing tr td').on('click', 'input[type=checkbox]', function() {
      console.log("Clicked.");
      console.log(this);
  });
  </code></pre>
  
  <p><strong>Adding the inputs for all standards from API</strong></p>
  
  <pre><code>// Select table and whipe current standards that are listed
  var table = document.getElementById('pl-standard-listing');
  $('#pl-standard-listing tr').remove();
  for(var iCount = 0; iCount &lt; currentStandards.length; iCount++) {
      // Check if the standard is in the list of included standards with this grade group
      if(standardIds.indexOf(currentStandards[iCount].id) === -1) {
          $('#pl-standard-listing').append($('&lt;tr&gt;&lt;td&gt;&lt;input name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /&gt;&lt;/td&gt;&lt;td&gt;' + currentStandards[iCount].code + '&lt;/td&gt;&lt;td&gt;' + currentStandards[iCount].description + '&lt;/td&gt;&lt;/tr&gt;'));
      } else {
          $('#pl-standard-listing').append($('&lt;tr&gt;&lt;td&gt;&lt;input checked name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /&gt;&lt;/td&gt;&lt;td&gt;' + currentStandards[iCount].code + '&lt;/td&gt;&lt;td&gt;' + currentStandards[iCount].description + '&lt;/td&gt;&lt;/tr&gt;'));
      }
  }
  </code></pre>
  
  <p>The standards load properly in the view, I just can't get the event handler right for clicking the checkbox. Any and all help is greatly appreciated.</p>