title: jQuery: click() not working on elements added by jQuery
body: <p>I made a to do list using Bootstrap and jQuery. Items get deleted from the list by clicking on the 'X' badge on the right side of each list item. This works for the items that are on the page when it first loads, but you can't remove items that are added by the user.</p>
  
  <p>Maybe something needs to be refreshed to remind the script that new elements should be monitored for the click event?</p>
  
  <p><a href="http://jsfiddle.net/pcx5mvh7/" rel="nofollow">http://jsfiddle.net/pcx5mvh7/</a></p>
  
  <p>todo.js:</p>
  
  <pre><code>$(document).ready(function() {
      //add item if the button is clicked
      $('#addButton').click(function(){
          $('&lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;' + $('#input').val() + '&lt;/li&gt;').appendTo('#list');
          $('#input').val(null);
      });
  
      //add item if the enter key is pressed
      $('#input').bind("enterKey",function(e){
          $('&lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;' + $('#input').val() + '&lt;/li&gt;').appendTo('#list');
          $('#input').val(null);
      });
  
      $('#input').keyup(function(e){
          if(e.keyCode == 13) {
              $(this).trigger("enterKey");
          }
      });
  
      //remove an item by clicking the badge
      $('.badge').click(function() {
          $(this).parent().remove();
      });
  });
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;To Do List&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="todo.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  
      &lt;div class="panel panel-default"&gt;
  
          &lt;!-- Default panel contents --&gt;
          &lt;div class="panel-heading"&gt;&lt;h3 class="panel-title"&gt;To Do List&lt;/h3&gt;&lt;/div&gt;
  
        &lt;!-- List group --&gt;
      &lt;ul id="list" class="list-group"&gt;
          &lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;Pushups! &lt;/li&gt;
          &lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;Get Money&lt;/li&gt;
          &lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;Increase my word power&lt;/li&gt;
          &lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;Beat God at his own game&lt;/li&gt;
          &lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;X&lt;/span&gt;Make everything go my way&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- text input &amp; button --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-6"&gt;
              &lt;div class="input-group"&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button id="addButton" class="btn btn-default" type="button"&gt;Add&lt;/button&gt;
                  &lt;/span&gt;
                  &lt;input id="input" type="text" class="form-control"&gt;
              &lt;/div&gt; &lt;!-- end input group --&gt;
          &lt;/div&gt; &lt;!-- end col-lg-6 --&gt;
      &lt;/div&gt; &lt;!-- end row --&gt;
      &lt;br&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>