Why is the val I'm adding to an unordered list vanishing right after I add it?

css, html, javascript, jquery

Solution

$('#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 = "";
    }
});

Problem

I've got a "text box" whose contents I want to send to an unordered list when the user mashes the "Enter" key: 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(""); } }); ``` 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? UPDATE This is what I've ended up with (http://jsfiddle.net/AEy9x/), based primarily on adeneo's answer: ``` $('#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(""); } }); ``` UPDATE 2 In jsfiddle, this works as long as the jquery version is above 1.6.4. 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 still does not work...?!? I see the val in the UL for a "flash," but then it's gone again. Note: I also updated the 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> ``` UPDATE 3 @sriniris: 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: ``` $('#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 = ""; } ``` UPDATE 4 The problem is that the form is 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": ``` e.preventDefault(); ! important ``` ? UPDATE 5 I still have the same problem with this: ``` $('#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(""); } }); ```

Original source