title: Issues with jQuery .on( 'click' ) API call
body: <p>I have been working on a simple weather app project. The user enters a zip code into an input element which (upon clicking a button element) makes an API call to wunderground.com. A few pieces of data are then grabbed from the JSON object, stringified and inserted into the DOM.</p>
  
  <pre><code>(function() {
          var wundergroundAPI = "https://api.wunderground.com/api/3b411ca908826af8/conditions/q/";
          var input = $('input');
  
          $('#submit').on('click', function() {
              var inputValue = input.val();
              var weatherByZip = wundergroundAPI += inputValue += '.json';
              $.getJSON(weatherByZip, function(json) {
                  $('#temp-f')
                  .text('Temperature: ' + JSON.stringify(json['current_observation']['temp_f']) + ' F');
                  $('#location')
                  .text('Location: '+ JSON.stringify(json['current_observation']['display_location']['full']));
                  $('#weather')
                  .text('Weather: ' + JSON.stringify(json['current_observation']['weather']));
                  input.val("");
              })
          });
      })();
  </code></pre>
  
  <p>The jQuery works fine on the first API call.</p>
  
  <pre><code>GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json
  </code></pre>
  
  <p>However, the second API call does not. </p>
  
  <pre><code>GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json06840.json
  </code></pre>
  
  <p>The issue seems to be in the way I declare the weatherByZip variable:</p>
  
  <pre><code>var weatherByZip = wundergroundAPI += inputValue += '.json';
  </code></pre>
  
  <p>What I intended was that the weatherByZip variable would be updated (with a new inputValue plus the .json extension) each time the function is called. What happens instead is that the inputValue and .json are appended to the end of the previously created variable.</p>
  
  <pre><code>70118.json06840.json
  70118.json06840.json90210.json
  </code></pre>
  
  <p>How would I fix my jQuery function so as to rectify this problem. That is, each time the function is called (a button element is clicked) a new/updated API call occurs?</p>