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

这里是我的代码：http://jsfiddle.net/H5bRH/文本输入插入错误的值到列表项

我每次点击提交按钮，它应该插入我所输入到一个新的里项。

但是不是这样，它插入我第一次输入的内容加上我输入的新值。玩我的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); 
}

来源

2013-12-09 shawnkauffman

你滑动加在前面的李元素点下来，而不是一个现在 – adeneo

为什么不干脆减少所有代码：

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

jsFiddle example

来源

2013-12-09 18:58:05 j08691

而不必为＃两个click处理程序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"); 
}

来源

2013-12-09 18:58:24 Quantastical

+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

来源

2013-12-09 18:58:49 Praveen

这是因为你绑定#saveTweet元件的2个单击处理。

一个添加的内容，以及一个以动画的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/

来源

2013-12-09 19:02:17

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

回答

相关问题