title: Why is the val I'm adding to an unordered list vanishing right after I add it?
body: <p>I've got a "text box" whose contents I want to send to an unordered list when the user mashes the "Enter" key:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" name="InputUPC" id="InputUPC" /&gt;
  &lt;ul id="CandidateUPCs" name="CandidateUPCs" class="ulUPCs"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.ulUPCs {
      min-height:160px;
      height:auto !important;
      height:160px;
      max-width:344px;
      width:auto !important;
      width:344px;
      border-style:solid;
      border-width:2px;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('#InputUPC').keypress(function (event) {
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
          var upcPrefix = jQuery.trim($("#InputUPC").val());
  
          if (upcPrefix != "") {
                $("#CandidateUPCs").append('&lt;li&gt;' + upcPrefix + '&lt;/li&gt;');
          }
          $("#InputUPC").val("");
      }
  });
  </code></pre>
  
  <p>When I enter something into "InputUPC" and mash the  key, the value appears in the unordered list, but only for a "brief second" then it disappears. The value in "InputUPC" also disappears, but that is as expected. Why is it also vacating the UL premesis?</p>
  
  <h2>UPDATE</h2>
  
  <p>This is what I've ended up with (<a href="http://jsfiddle.net/AEy9x/" rel="nofollow">http://jsfiddle.net/AEy9x/</a>), based primarily on adeneo's answer:</p>
  
  <pre><code>$('#InputUPC').keyup(function (event) {
      event.preventDefault();
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
          var upcPrefix = jQuery.trim($("#InputUPC").val());
  
          if (upcPrefix != "") {
                $("#CandidateUPCs").append('&lt;label for=' + upcPrefix + '&gt;' + upcPrefix + ' &lt;/label&gt;');
                $("#CandidateUPCs").append('&lt;input type=\"checkbox\" name=' + upcPrefix + ' id=' + upcPrefix + ' /&gt;');
                $("#CandidateUPCs").append('&lt;br&gt;');
          }
          $("#InputUPC").val("");
      }
  });
  </code></pre>
  
  <h2>UPDATE 2</h2>
  
  <p>In jsfiddle, this works as long as the jquery version is above 1.6.4.</p>
  
  <p>That being the case, I updated my project to jquery 1.9.1 (it had been referencing version 1.4.4 in one place, and 1.6.2 in all other places). However, it <em>still</em> does not work...?!?</p>
  
  <p>I see the val in the UL for a "flash," but then it's gone again.</p>
  
  <p>Note: I also updated the jquery-ui:</p>
  
  <pre><code>@*    &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"&gt; &lt;/script&gt;*@
      &lt;script src="@Url.Content("http://code.jquery.com/ui/1.10.3/jquery-ui.js")" type="text/javascript"&gt; &lt;/script&gt;
  </code></pre>
  
  <h2>UPDATE 3</h2>
  
  <p>@sriniris:</p>
  
  <p>The same thing happens with either block of code (mine is first; adeneo's is second), namely, the UL is populated for a nanosecond, but then the flighty bits skedaddle quicker than greased and polished lightning:</p>
  
  <pre><code>$('#InputUPC').keyup(function (event) {
      event.preventDefault();
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
          var upcPrefix = jQuery.trim($("#InputUPC").val());
  
          if (upcPrefix != "") {
                $("#CandidateUPCs").append('&lt;label for=' + upcPrefix + '&gt;' + upcPrefix + ' &lt;/label&gt;');
                $("#CandidateUPCs").append('&lt;input type=\"checkbox\" name=' + upcPrefix + ' id=' + upcPrefix + ' /&gt;');
                $("#CandidateUPCs").append('&lt;br&gt;');
          }
          $("#InputUPC").val("");
      }
  });
  
  
  
  $('#InputUPC').on('keyup', function(e) {
  e.preventDefault();
  if (e.which == 13) {
      var upcPrefix = $.trim( this.value );
  
      if (upcPrefix != "") {
            var upcElem = $('&lt;li /&gt;', {text : upcPrefix});
            $("#CandidateUPCs").append(upcElem);
      }
      this.value = "";
  }
  </code></pre>
  
  <h2>UPDATE 4</h2>
  
  <p>The problem is that the form <em>is</em> being submitted, even though there is code to prevent that (preventDefault). I know this because when I select a slew of checkboxes, they all go deselected at the same time that the value briefly entered into the UL also goes bye-bye. So is there something analagous to this mixture of "metaphors":</p>
  
  <pre><code>e.preventDefault(); ! important
  </code></pre>
  
  <p>?</p>
  
  <h2>UPDATE 5</h2>
  
  <p>I still have the same problem with this:</p>
  
  <pre><code>    $('#InputUPC').keyup(function (event) {
      if (event.stopPropagation) { // W3C/addEventListener()
          event.stopPropagation();
      } else { // Older IE.
          event.cancelBubble = true;
  }
           event.preventDefault();
          var keycode = (event.keyCode ? event.keyCode : event.which);
          if (keycode == '13') {
              //alert('get the values that start with what was entered and place it in ulUPCStartsWith');
              var upcPrefix = jQuery.trim($("#InputUPC").val());
  
              if (upcPrefix != "") {
                    $("#CandidateUPCs").append('&lt;label for=' + upcPrefix + '&gt;' + upcPrefix + ' &lt;/label&gt;');
                    $("#CandidateUPCs").append('&lt;input type=\"checkbox\" name=' + upcPrefix + ' id=' + upcPrefix + ' /&gt;');
                    $("#CandidateUPCs").append('&lt;br&gt;');
              }
              $("#InputUPC").val("");
          }
      });
  </code></pre>