title: Why doesn't my jQuery work for elements loaded via ajax?
body: <p>I have a jsp page which contains a form with the following elements:</p>
  
  <pre><code>&lt;form class="form-inline" role="form" action="CadsInsertion" method="POST"&gt;
      &lt;div id="formItems" class="form-group"&gt;
          &lt;input type="text" id="date" name="date" placeholder="Date"&gt;&lt;label class="btn btn-danger" id="_date"&gt;-&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-6 col-lg-offset-3"&gt;
          &lt;button id="submit" type="submit" class="btn btn-warning btn-lg"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As the page is loaded I use the following jQuery to add more elements which are fetched from my Servlet <code>FormElements</code>.</p>
  
  <pre><code>$(document).ready(function() {
      $.ajax({
          url: "FormElements",
          data: {docType: "&lt;%=session.getAttribute("docType")%&gt;"},
          success: function(data) {
              if(data != null) {
                  $("#formItems").append(data);
              }
      }});
  });
  </code></pre>
  
  <p>What I basically do in the servlet is process the data from the ajax call and write some jsp elements accordingly. For the sake of simplicity I shall omit the Servlet implementation and just skip to the output.</p>
  
  <p>After the ajax code is executed, new elements are added into the <code>formItems</code> division:</p>
  
  <pre><code>&lt;input id="Image" type="text" placeholder="Image" name="Image"&gt;
  &lt;label id="_Image" class="btn btn-danger"&gt;-&lt;/label&gt;
  &lt;br&gt;
  &lt;input id="Format" type="text" placeholder="Format" name="Format"&gt;
  &lt;label id="_Format" class="btn btn-danger"&gt;-&lt;/label&gt;
  &lt;br&gt;
  &lt;input id="Type" type="text" placeholder="Type" name="Type"&gt;
  &lt;label id="_Type" class="btn btn-danger"&gt;-&lt;/label&gt;
  </code></pre>
  
  <p>Now my question is, I use the following jQuery to remove elements from the form:</p>
  
  <pre><code>$("label").click(function(e) {
      var item = e.target.id;
      item = item.replace("_", "");
      $("#" + item).remove();
      e.target.remove();
  });
  </code></pre>
  
  <p>But this only works for the elements which were already statically defined in my page and does not work for the elements loaded using ajax. Why is this?</p>