Почему значение 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" также исчезает, но это так, как ожидалось. Почему он также освобождает прессу UL?

UPDATE

Вот что я получил (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

В jsfiddle это работает до тех пор, пока версия jquery выше 1.6.4.

В этом случае я обновил свой проект до jQuery 1.9.1 (он ссылался на версию 1.4.4 в одном месте и 1.6.2 во всех других местах). Однако он все еще не работает...?!?

Я вижу val в UL для "flash", но потом он снова пошел.

Примечание. Я также обновил 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:

То же самое происходит и с блоком кода (первый - первым, adeneo - вторым), а именно, 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;
}