Question

当我在输入字段中写入一些文本时。并希望它显示在输入字段下方，按下提交按钮时它会消失。我不知道为什么。

HTML：

<textarea id ="comments" cols="30" rows="3"></textarea>
            <input type="submit" value="Submit" id="submit"/> 
            <div id="divComments"></div>

Jquery的：

function addComment(name1) {

        var container = $('divComments');
        var inputs = container.find('label');
        var id = inputs.length + 1;

        var div = $('<div />');

        $('<label />', {
            id: 'comment' + id,
            text: name1
        }).appendTo(div);

        div.appendTo(container);     
    }

    $('#submit').click(function () {
        addComment($('#comments').val());
        $('#comments').val("");
    });

Answer 1

您错过了# ID选择器，更改了

var container = $('divComments');

到

var container = $('#divComments');

<强> See the fixed demo.

Answer 2

divComments div的选择器缺少id选择器的#。

function addComment(name1) {
    var container = $('#divComments');
    var inputs = container.find('label');
    var id = inputs.length + 1;
    var div = $('<div />');

    $('<label />', {
        id: 'comment' + id,
        text: name1
    }).appendTo(div);

    div.appendTo(container);
}

$('#submit').click(function () {
    addComment($('#comments').val());
    $('#comments').val("");
});

Working fiddle

Answer 3

以及修复以下行以添加哈希

    var container = $('#divComments');

您还需要更改提交功能：

$('#submit').click(function (e) {
    e.preventDefault();
    addComment($('#comments').val());
    $('#comments').val("");
});

这将停止实际提交的表单（并重新加载页面） - 这可能是您的文本消失的原因。如果您没有围绕输入的表单，那么您不需要为此答案的第二部分而烦恼。

提交文本后，jQuery消失了

3 个答案: