title: toggling dynamically created divs in jquery
body: <p>I have two divs with the class names <code>list_item</code> and <code>list_item_menu</code>.  They are both contained in another div with the class <code>list_item_container</code>.  I am able to use the following to show/hide <code>list_item_menu</code> when <code>list_item</code> is clicked:</p>
  
  <pre><code>$(".list_item").click(function() {
      $(this).next('.list_item_menu').toggle();
  });
  </code></pre>
  
  <p>This works when the divs are written in the original html, but when the divs are created dynamically, the toggling does not work.  I tried creating them like this:</p>
  
  <pre><code>function addListItem () {
  var text = $("#new_item_field").val();
  $("#list_box").children().last().after(
      '&lt;div class = "list_item_container"&gt;'+
          '&lt;div class = "list_item"&gt;'+
              text+
          '&lt;/div&gt;'+
          '&lt;div class = "list_item_menu"&gt;'+
              'notes | due | completed'+
          '&lt;/div&gt;'+   
      '&lt;/div&gt;'
  );
  $("#new_item_field").val('');
  }
  </code></pre>
  
  <p>and like this:</p>
  
  <pre><code>function addListItemToDoc () {
  var text = $("#new_item_field").val();
  
  var listbox = document.getElementById('list_box');
  var container = document.createElement('div');
      container.className = 'list_item_container';
  var item = document.createElement('div');
      item.className = 'list_item';
      item.innerHTML = text;
  var menu = document.createElement('div');
      menu.className = 'list_item_menu';
      menu.innerHTML = "notes | due | completed";
  
  container.appendChild(item);
  container.appendChild(menu);
  listbox.appendChild(container);
  
      $("#new_item_field").val('');
  }
  </code></pre>
  
  <p>but neither way seems to work.  Any ideas?</p>