title: Deleting items from a dynamically generated list with jQuery
body: <p>I'm rather new to jQuery, so forgive me if this is trivial.</p>
  
  <p>I am generating a list of links dynamically based on information which is stored in a database. Next to every link I place a delete button. It's purpose is to firstly delete the information from the database, and then to remove itself and it's container from the html page. Now when I try to attach an event to each button, this doesn't seem to work for some reason. Any help would be greatly appreciated </p>
  
  <p>So far I came up with the following code:</p>
  
  <p>For the html part:</p>
  
  <pre><code>&lt;div id="main-content"&gt;
      &lt;div id="existing-content"&gt;
      &lt;/div&gt;
      &lt;div id="new-content"&gt;
          &lt;p&gt;
         &lt;input type="button" id="newcat" value="Nieuwe Categorie" /&gt;
     &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then for the jQuery part:</p>
  
  <pre><code>$(document).ready(function() {
      $.getJSON('getCategories.php', function(data, textStatus, jqXHR) {
          // Check if there are any categories in the database (this works)
          if (eval(data.categoriesPresent)) {
              // Append an ordered list of links to the div
              $('#existing-content').append('&lt;ol id="categories"&gt;&lt;/ol&gt;');
  
              // Append list items to the ordered list (this also works)
              for (i=0; i&lt;data.categories.ids.length; i++) {
  
                  // JSON call to get numerical id of a category
                  var catId = data.categories.ids[i];
                  var catName = data.categories.names[i];
  
                  // Create a listing of all categories currently stored in the database
                  $('#categories').append('&lt;li id="listItem' + catId 
                      + '"&gt;&lt;p&gt;&lt;a href="category.html?catId=' + catId  
                      + '&amp;catName=' + catName +'"&gt;Categorie: ' + catName
                      + '&lt;/a&gt;&lt;/label&gt;&lt;input type="button" class="delete" id="cat"' + catId 
                      + ' value="Verwijder" ?&gt;&lt;/p&gt;&lt;/li&gt;'
                  );
  
                 // Generate delete functions for all available categories (this DOESN'T work)
                 $('#cat' + dataId).click(function() {
                     alert("WE GOT HERE");
                     $.ajax({
                         url : "deleteCategory.php?catId=" + data.categories.ids[i],
                         success : function() {
                             $('#listItem' + data.categories.ids[i]).remove();
                         }
                     });
                 });
             }
         }
     });
     ...
  });
  </code></pre>