title: Can I fire functions based on an appended list of <li> elements?
body: <p>For the sake of keeping the post clean, I have scaled down everything. I'm trying to add things to the dom after I remove the last <code>&lt;li&gt;</code> element from the page, which has been appended via jQuery.</p>
  
  <p>I have an <code>.each</code> function that uses a JSON array to populate an unordered list via <code>.append()</code>.</p>
  
  <pre><code>var businessList = $('ul');
  var businessInfo = [{"id": 10004, "category": "food"}]
  
  $.each(businessInfo, function(idx, obj) {
          $(businessList).append('&lt;li id="business-' + this.id + '"&gt;');
  });
  </code></pre>
  
  <p>Then I have an <code>$.ajax</code> call that removes each <code>&lt;li&gt;</code> after checking a few things on submit. Either by using the script inside the <code>.done</code> or <code>beforeSend:</code> functions.</p>
  
  <p>Everything works fine until I try to add a function to fire once the last <code>&lt;li&gt;</code> is removed.</p>
  
  <p>Lets say I want a <code>&lt;button&gt;</code> to <code>fadeIn()</code> at the same time or after the last <code>&lt;li&gt;</code> element disappears, I've been trying things like this:</p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: "url",
      data: dataSource,
      dataType: "html",
      beforeSend: function() {
      //Invalid:
          if ($('li.class').is(':empty')) {
              xhr.abort();
          } 
      //Valid:
          else {
              $('li.class').remove();
          }
  
  }).done(function() {
      $('document').ready(function() {
          if ($('li').length == 0) {
              $('.continue-btn').fadeIn(300);
              console.log('im the last one')
          }
      //Or this
      if ($('ul li:only-child')) {
              $('.continue-btn').fadeIn(300);
          }
      });
  })
  </code></pre>
  
  <p>I simply cant get it to fire only for the last <code>&lt;li&gt;</code> on the page. Using the same thing inside the <code>beforeSend:</code> results in slightly different behavior. (My script fires accordingly, but on the first submit, instead of the last)</p>
  
  <p>I'm suspicious that its because it has been appended, and dosen't actually exist, but then again the other functions I'm calling work. Pretty confused.</p>
  
  <p>========================
  EDIT:</p>
  
  <p>As Rens suggested below, it came down to using the <code>success:</code> function. If anyone is interested, heres the working example: <a href="https://jsfiddle.net/aquillium/qnj15g3r/" rel="nofollow">https://jsfiddle.net/aquillium/qnj15g3r/</a></p>