为什么我添加到一个无序列表中的val在我添加它之后就消失了?

我有一个"文本框"，当用户按下"Enter"键时，我想将其内容发送到一个无序列表:

HTML

<input type="text" name="InputUPC" id="InputUPC" />
<ul id="CandidateUPCs" name="CandidateUPCs" class="ulUPCs"></ul>

CSS

.ulUPCs {
    min-height:160px;
    height:auto !important;
    height:160px;
    max-width:344px;
    width:auto !important;
    width:344px;
    border-style:solid;
    border-width:2px;
}

jQuery

$('#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('<li>' + upcPrefix + '</li>');
        }
        $("#InputUPC").val("");
    }
});

当我在"InputUPC"中输入一些东西并捣碎键时，值出现在无序列表中，但只出现"短暂的一秒钟"，然后它就消失了。"InputUPC"中的值也消失了，但这是意料之中的。为什么它也要腾出美国总部?

更新

这是我最终得到的(http://jsfiddle.net/AEy9x/)，主要基于adeneo的回答:

$('#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('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>');
              $("#CandidateUPCs").append('<input type='"checkbox'" name=' + upcPrefix + ' id=' + upcPrefix + ' />');
              $("#CandidateUPCs").append('<br>');
        }
        $("#InputUPC").val("");
    }
});

更新2

在jquery中，只要jquery版本在1.6.4以上就可以。

在这种情况下，我将我的项目更新为jquery 1.9.1(它在一个地方引用1.4.4版本，在所有其他地方引用1.6.2版本)。然而，它仍然不起作用…?

我在UL中看到了"flash"的val，但是它又消失了。

注意:我还更新了jquery-ui:

@*    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"> </script>*@
    <script src="@Url.Content("http://code.jquery.com/ui/1.10.3/jquery-ui.js")" type="text/javascript"> </script>

3

更新

@sriniris:

同样的事情发生在任何代码块(我的是第一个;adeo的是秒)，也就是说，UL填充了一纳秒，但随后轻浮的比特比润滑和抛光的闪电更快地离开了:

$('#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('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>');
              $("#CandidateUPCs").append('<input type='"checkbox'" name=' + upcPrefix + ' id=' + upcPrefix + ' />');
              $("#CandidateUPCs").append('<br>');
        }
        $("#InputUPC").val("");
    }
});

$('#InputUPC').on('keyup', function(e) {
e.preventDefault();
if (e.which == 13) {
    var upcPrefix = $.trim( this.value );
    if (upcPrefix != "") {
          var upcElem = $('<li />', {text : upcPrefix});
          $("#CandidateUPCs").append(upcElem);
    }
    this.value = "";
}

更新4

问题是表单是被提交，即使有代码阻止它(preventDefault)。我之所以知道这一点，是因为当我选中一系列复选框时，它们都被取消选中，同时，在UL中短暂输入的值也被取消选中。那么，有没有类似于这种"隐喻"的混合呢?

e.preventDefault(); ! important

?

更新5

我仍然有同样的问题:

    $('#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('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>');
                  $("#CandidateUPCs").append('<input type='"checkbox'" name=' + upcPrefix + ' id=' + upcPrefix + ' />');
                  $("#CandidateUPCs").append('<br>');
            }
            $("#InputUPC").val("");
        }
    });

$('#InputUPC').on('keyup', function(e) {
    e.preventDefault();
    if (e.which == 13) {
        var upcPrefix = $.trim( this.value );
        if (upcPrefix != "") {
              var upcElem = $('<li />', {text : upcPrefix});
              $("#CandidateUPCs").append(upcElem);
        }
        this.value = "";
    }
});

$('#InputUPC').bind('keyup', function(e) {

if (event.stopPropagation) { // W3C/addEventListener()
        event.stopPropagation();
    } else { // Older IE.
        event.cancelBubble = true;
}