title: How to trigger jquery "on" event via ajax without user interaction
body: <p>I have a call to a remote web service that returns a list of items that are then listed on the web page, 1 minute later a new list is sent and I need to take the old list, work out which items are new and then modify the list.</p>
  
  <p>Step #2 in the process is to generate a list of all the currently listed items, however because they're loaded via AJAX I can't do a simple $('#items').each(); I need to use the "on" function.</p>
  
  <p>The on function uses events, I can't seem to work out / find out how to have it do "on"... the request? The current way I'm doing it seems ridiculous:</p>
  
  <pre><code>$.ajax({
      url: url,
      success: function(data) {
          $('#items .item').on("click", function() {
              console.log("an item");
          });
  
          $('#items .item').trigger("click");
      }
  });
  </code></pre>
  
  <p>I'm faking the "click" event so that the "on" has something to listen for, but this seems weird.</p>
  
  <p>What is the proper way to use "on" to interact with the items without faking a click event, or is faking a click event the only way to do it?</p>
  
  <hr>
  
  <p>Edit for clarification:</p>
  
  <p>Step 1. Web page loads with HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="items"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Step 2. After 10 seconds an AJAX call is made to items.php, it responds with a JSON representation of the items, I then use .each to insert them into the page like so:</p>
  
  <pre><code>$.each(data, function(key, value) {
      $('#content').append('&lt;div class="item"&gt;'+value.title+'&lt;/div&gt;');
  });
  </code></pre>
  
  <p>So it now looks like</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="items"&gt;
          &lt;div class="item"&gt;title&lt;/div&gt;
          &lt;div class="item"&gt;title&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Step 3. After 60 seconds another AJAX call is made to items.php again, it responds with a JSON representation of the new items. At this point I need to get the currently listed items (every .item in #items) by their title and do some comparisons on the new titles.</p>
  
  <pre><code>$('#items .item').each(function(){
      // doesn't work because the items aren't available 
  });
  </code></pre>
  
  <p>My googling has told me I need to use "live", which has been deprecated and "on" is now used in its place...</p>
  
  <p>I need a way to loop through the previously loaded elements.</p>
  
  <hr>
  
  <p>Final Edit:</p>
  
  <p>The problem did not exist, looks like I had typo'd the name of the div and in my haste I assumed that the problem was what I had experienced before: the need for on/live. Lots of previous Stack Overflow questions discussed the need for live/on with Javascript inserted HTML, however it seems that is specifically for <strong>user interaction</strong>. Javascript can interact with the loaded items just fine, but jquery can't act on user interactions with those items without live/on.</p>
  
  <p>My bad.</p>