title: How to access dynamically added element with jquery
body: <p>I have some posts which are coming from database.  These posts are added to page after the page get loaded by ajax. I am adding a delete button on every post and every button has an id.  Here is my code :</p>
  
  <pre><code>&lt;i class="fa fa-trash" id="unique-id"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>Now I want to access these buttons in jQuery through their id on <code>onclick()</code> method but the problem is that these buttons are added in page after the page is loaded and I guess jQuery methods can only be called inside a document ready function. So currently I doing this in following way :</p>
  
  <pre><code>&lt;i class="fa fa-trash" onclick="delPost('id')"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>and here is some javascript : </p>
  
  <pre><code>function delPost(id) {
  
      var post_id = id;
      var post = "#post_"+id;
  
      $(post).fadeOut(300, function() {
          $.ajax({
  
              type : 'POST',
              url  : 'update.php',
              data: ({id : post_id, act : "rem-post"}),
              success : function()
              {
                  // Some Function
              }
          }); //End of Ajax
      });
  
  }
  </code></pre>
  
  <p>I want this function to be called with jQuery... Is this possible ??</p>