title: Deleting elements with .on event handler and no page refresh
body: <p>I have some simple data that I am pulling from a phpMyAdmin database. I populate the div with this data and then have <code>X</code> to delete the item from the page. The delete happens without a problem but it is not a live event. I have to reload the page before I can the element deleted. Why is that happening? I have specify the <code>on</code> event to occur when the <code>X</code> is clicked to delete item but nothing happens.</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div id="listInserts"&gt;
      dog&lt;a class="del" rel="1" href="#"&gt;X&lt;/a&gt;
      cat&lt;a class="del" rel="2" href="#"&gt;X&lt;/a&gt;
      bird&lt;a class="del" rel="3" href="#"&gt;X&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function() {
  
      $.get('dashboard/xhrGetListings', function(o) {
       //Pulling results from database
          for (var i = 0; i &lt; o.length; i++)
          {
              $('#listInserts').append('&lt;div&gt;' + o[i].text + '&lt;a class="del" rel="'+o[i].id+'" href="#"&gt;X&lt;/a&gt;&lt;/div&gt;');
          }
       //Perform live delete
          $('#listInserts').on('click', 'a.del', function(e) {
              var delItem = $(this);
              var id = $(this).attr('rel');
  
              $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
                  delItem.parent().remove();
              }, 'json');
  
              return false;
          });
  
      }, 'json');
  
  });
  </code></pre>