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

Text input inserting wrong value into list item

本文关键字：文本 输入 错误 插入 列表      更新时间：2024-05-28

这是我的代码：http://jsfiddle.net/H5bRH/

每次我点击提交按钮，它都会将我键入的内容插入到一个新的li项目中。

但相反，它插入了我第一次键入的内容加上我键入的新值。玩我的小提琴看看我的意思。

如何修复此问题，使其仅将用户输入的内容添加到表单中？

我想这里有问题：

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);
}

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

  1. button.onclick = saveTweet;
  2. 使用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

为什么不将所有代码简化为：

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

jsFiddle示例

不要为#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");
}
这是因为在#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/

相关文章：