title: Why does this <li> get added multiple times?
body: <p><a href="http://jsfiddle.net/ay9d8cuq/3/" rel="nofollow">http://jsfiddle.net/ay9d8cuq/3/</a></p>
  
  <p>To recreate, try adding a location/service filter more than once.  Notice how it adds empty items to the list.</p>
  
  <p>Why does this code add the filter more than once to the DOM?</p>
  
  <pre><code>$('#addFilter').click(function(){
      var filter = $('#FilterTypes').val();
  
      switch (filter)
      {
          case "Location":
                  $('#LocationFilter').show()
                  .find('.addFilter').click(function() {
                      $(this).parent().hide();
                      AddLocationFilter();
                  });
                  break;
              case "Service":
                  $('#ServiceFilter').show()
                  .find('.addFilter').click(function() {
                      $(this).parent().hide();
                      AddServiceFilter();
                  });
                  break;
      }
  });
  
  var AddLocationFilter = function() {
      $('#Filters').append('&lt;li&gt;' + $('#City').val() + ', ' + $('#State').val() + '&lt;/li&gt;');
      $('#City').val('');
      $('#State').val('');
  };
  
  var AddServiceFilter = function() {
      $('#Filters').append('&lt;li&gt;' + $('#Name').val() + '&lt;/li&gt;');
      $('#Name').val('');
  };
  </code></pre>