title: JQuery script wont work
body: <p>I have the following setup for a community website:</p>
  
  <pre><code>&lt;div id="posts"&gt;
      &lt;div class="container"&gt;
          &lt;div id="placeholder"&gt;&lt;/div&gt;
          &lt;h1&gt;Friend Requests&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
     
     </p>
  
  <p><code>getRequests.js</code> appends the following into the <code>container</code> div:</p>
  
  <pre><code>&lt;div id="4" class="result"&gt;
      &lt;a href="user.php?id=4"&gt;
          &lt;img src="images/user-uploads/profile/?id=4"&gt;Random Guy
      &lt;/a&gt;
      &lt;div class="response"&gt;
      &lt;button data-id="4" class="accept"&gt;Accept&lt;/button&gt;
      &lt;button data-id="4" class="deny"&gt;Deny&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>friendResponse.js</code> has the following:</p>
  
  <pre><code>$(function(){
    $(".accept").click(function(){
      var id = $(this).attr("data-id");
      $("#"+id).remove();
    });
  });
  </code></pre>
  
  <p>So, you would expect that when I click the accept button, the container <code>with id=1</code> should get removed, but for some reason, it doesn't. </p>
  
  <p>And also, to add to the peculiarity, the code works if I inject it through the console.</p>
  
  <p>And, for the record, the script is not showing any errors.</p>