title: jQuery change event on input firing on page load
body: <p>Why is the following <code>JQuery</code> triggered event running when the document becomes ready in the browser. I have very little experience with <code>JQuery</code> so I am kinda stuck with this one.</p>
  
  <pre><code>    &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;form name="f1" id="f1"&gt;Input:
      &lt;input list="br" name="b" id="b"&gt;
      &lt;datalist id="br"&gt;
          &lt;option value="10"&gt;
              &lt;option value="11"&gt;
                  &lt;option value="12"&gt;
                      &lt;option value="100"&gt;
                          &lt;option value="101"&gt;
      &lt;/datalist&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;fieldset&gt;
      &lt;legend id="result"&gt;&lt;/legend&gt;
  &lt;/fieldset&gt;
  
  &lt;script&gt;
  $("#b")
      .change(function () {
      var str = $('#b').val();
      $("#result").text(str);
  
      $.get("cgi-bin/something.cgi?s=" + str, function (data) {
          $("body")
              .append("Name: " + data.name) 
          .append("Time: " + data.time);
      }, "json");
      alert("Load was performed.");
  })
      .change();
  &lt;/script&gt;
  </code></pre>
  
  <p>Bonus points if you can also tell me why "cgi-bin/something.cgi?s=" + str is not including var <code>str</code> in the <code>Get</code> request. Thanks in advance for the help.</p>