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

admin管理员组

文章数量:1354771

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 (/), 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(".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("");
        }
    });

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/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./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("");
        }
    });

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 10, 2013 at 23:30 B. Clay Shannon-B. Crow Raven asked May 3, 2013 at 21:41 B. Clay Shannon-B. Crow RavenB. Clay Shannon-B. Crow Raven 10.4k157157 gold badges503503 silver badges900900 bronze badges 8

• 2 Works fine for me in Chrome 26 and IE 9/10, even when rapidly entering values: jsfiddle/SV5Yy. – Tim M. Commented May 3, 2013 at 21:43
• you should use "keydown", keypress works weird in some browsers and may be triggering multiple times – fmsf Commented May 3, 2013 at 21:46
• I tried Keydown, and it makes no difference; Tim's fiddle works fine for me, too ... curiouser and curiouser! I'm also using Chrome 26, BTW. – B. Clay Shannon-B. Crow Raven Commented May 3, 2013 at 21:53
• 3 It's because your real code is in a form, and enter submits the form. Both answers will probably fix this (though they should explain why!) – Tim M. Commented May 3, 2013 at 21:54
• Ah, yes! I (obviously) hadn't thought of that. – B. Clay Shannon-B. Crow Raven Commented May 3, 2013 at 21:56

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 5

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

The code as in the question works fine, however I imagine that in your actual code the input is inside a form.

Thus, hitting the enter key is very likely submitting the form (see §4.10.22.2 "Implicit submission" in the spec). What you are seeing is not a script/logic error that is clearing the ul; you are seeing the page reloading.

You can fix this by adding: [event object].preventDefault();

Examples:

1. Undesirable submission
2. Fixed

Adeneo's solution is the right one. But if you want to get it to work without upgrading to jQuery 1.9, you can always use the "bind" event instead of "on". On is supported from v1.7 onwards and replaces bind in the newer versions.

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

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?

Your issue may be caused by event bubbling. Try adding this code before event.preventDefault();

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

本文标签： javascriptWhy is the val I39m adding to an unordered list vanishing right after I add itStack Overflow