Question

每次我点击提交按钮时，都应该将我输入的内容插入到新的li项目中。

但不是这样，它会插入我第一次键入我键入的新值时键入的内容。和我的jsfiddle一起玩，看看我的意思。

如何解决此问题，以便只添加用户输入表单的内容？

我认为这里有问题：

function saveTweet() {
    var tweet = document.getElementById("tweet");
    var tweetName = tweet.value;
    var li = document.createElement("li");
    li.innerHTML = tweetName;
    var ul = document.getElementById("tweets");
    ul.appendChild(li);
}

Answer 1

您已将2 click 事件附加到 save 按钮。

button.onclick = saveTweet;
使用jQuery $("#saveTweet").click(function ()

$("#saveTweet").click(function () {
    var tweet = document.getElementById("tweet");
    var tweetName = tweet.value;
    var li = document.createElement("li");
    li.innerHTML = tweetName;
    var ul = document.getElementById("tweets");
    ul.appendChild(li);
    $("li").slideDown("fast");
});

JSFiddle

Answer 2

为什么不将所有代码减少到：

$("#saveTweet").click(function () {
    $('#tweets').append('<li>' + $("#tweet").val() + '</li>')
    $("li").slideDown("fast");
});

<强> jsFiddle example

Answer 3

不是为#saveTweet按钮设置两个点击处理程序，而是将slideDown调用移动到saveTweet函数。

function saveTweet() {
    var tweet = document.getElementById("tweet");
    var tweetName = tweet.value;
    var li = document.createElement("li");
    li.innerHTML = tweetName;
    var ul = document.getElementById("tweets");
    ul.appendChild(li);
    $("li").slideDown("fast");
}

Answer 4

这是因为您在#saveTweet元素上绑定了两个点击处理程序。

一个用于添加内容，另一个用于动画li元素..

在你的情况下，动画的第一个出现，第二个出现......所以你总是为之前添加的元素设置动画......

既然您使用jQuery，为什么不将它用于所有交互？

$(function () {
    var button = $("#saveTweet");

    button.on('click', function () {
        var tweet = $("#tweet"),
            ul = $("#tweets"),
            tweetName = tweet.val(),
            li = $('<li>', {html: tweetName});

        ul.append(li);
        li.slideDown("fast");
    });
});

演示 http://jsfiddle.net/gaby/Y9cY3/1/

文本输入将错误的值插入列表项

4 个答案: